PronounsPage/components/PropagateCheckbox.vue

<template>
    <div v-if="hasChanges" class="form-check form-switch my-2">
        <label>
            <input v-model="propagate" class="form-check-input" type="checkbox" role="switch">
            <T>profile.editor.propagate</T>
        </label>
    </div>
</template>

<script>
export default {
    props: {
        field: { required: true },
        before: { required: true },
        after: { required: true },
    },
    emits: ['change'],
    data() {
        return {
            propagate: false,
        };
    },
    computed: {
        hasChanges() {
            return JSON.stringify(this.before) !== JSON.stringify(this.after);
        },
    },
    watch: {
        hasChanges() {
            this.emit();
        },
        propagate() {
            this.emit();
        },
    },
    methods: {
        emit() {
            this.$emit('change', this.field, this.hasChanges && this.propagate);
        },
    },
};
</script>