ReviewReactions.vue

<template>
    <div>
        <span v-if="selectedReaction === 'agree'">
            You and {{ agree }} others disagree to this
        </span>
        <span v-else-if="selectedReaction === 'disagree'">
            You and {{disagree}} others disagree to this
        </span>
    </div>
</template>

<script>
    export default {
        name: 'review-reactions',
        props: ['agree', 'disagree', 'id', 'reaction'],

        data() {
            return {
                display: 'none'
            }
        },

        computed: {
            /**
             * Display the user selected reaction.
             * @note The `reaction` prop overrides any `react` event for this component.
             */
            selectedReaction() {
                if (!this.reaction) {
                    return this.display;
                }

                return this.reaction;
            }
        },

        methods: {
            /**
             * Handle a reaction event.
             *
             * @note You'd trigger this using window.vue.$emit('react', {YourPostId}, {ReactionType})
             * @param postId  // This would be your post ID
             * @param {'agree'|'disagree'} type
             */
            handleReaction(postId, type) {
                if (this.id !== postId) {
                    return;
                }

                this.display = type;
            }
        },

        created() {
            window.event.$on('react', this.handleReaction)
        }
    }
</script>