I strongly believe that adhering to the practice of maintaining a separate local state for child components, as advocated by @Luciano, is a recipe for disaster. It seems unnecessarily complicated given that Vue already has reactivity built-in. My concerns are outlined below:

1. If an error occurs during the execution of doSomething, the parent's options array will not be updated while the local_options array within the component has already been modified. This leads to a synchronization issue between the parent and local states.
2. Utilizing deep watchers in every reusable component can result in performance drawbacks when dealing with numerous child components. Additionally, managing a separate local state for each child component consumes memory resources needlessly.
3. By manually synchronizing the local state with the parent, you forfeit the reactive capabilities offered by Vue. This approach contradicts the intended usage of Vue.js.

To address these concerns, I propose an alternative solution that focuses on reusability, simplicity, and adherence to the DRY principle:

Instead of initializing an array in the mounted lifecycle hook, consider dynamically creating it within each method while passing it back to the parent component along with a custom update event:

props: ['options'],

methods: {
   updateOption(index, value) {
       let local_options = [ ...this.options]
       local_options[index].answer = value
       this.$emit('update', local_options)
   },

   removeOption(index) {
       let local_options = [ ...this.options]
       local_options.splice(index, 1)
       this.$emit('update', local_options)
   },

   addOption() {
       let local_options = [ ...this.options]
       local_options.push({
           answer: '',
           correct: false,
       })
       this.$emit('update', local_options)
   },
},

Subsequently, update the parent component's option data upon receiving the update event from the child using the v-on: directive or its shorthand @:

<multi-options :options="options" @update="handleUpdate" />

....
methods: {
    handleUpdate(options) {
         this.options = options; // triggering a rerender of the child component
    }
}

An additional point worth noting is the use of v-model on a prop within the <b-form-checkbox> element with

v-model="option.correct"

. To avoid mutating the prop inside the child component, adjust your implementation as follows:

            <b-form-checkbox
                :id="`option-${index}`"
                name="options"
                class="f-14 text-muted ml-1"
                :checked="option.correct"
                @change="setOptionsCorrect(index, $event)"
            >
                Correct?
            </b-form-checkbox>

Add the following method to your methods section:

setOptionsCorrect(index, value) {
    let local_options = [ ...this.options]
    local_options[index].correct = value
    this.$emit('update', local_options)
}

For those who prefer using v-model for styling purposes, a computed property can be derived from the options. However, ensure to have a dedicated setter that emits the event to the parent component in order to prevent "mutating props" issues:

computed : {
    computedOptions: {
        get: function() {
            return this.options
        },
        set: function(newOptions) {
            this.$emit("update", newOptions)
        }
    }
},
methods: {
   updateOption(index, value) {
       let local_options = [ ...this.options]
       local_options[index].answer = value
       this.options = local_options
   },

   removeOption(index) {
       let local_options = [ ...this.options]
       local_options.splice(index, 1)
       this.options = local_options
   },

   addOption() {
       let local_options = [ ...this.options]
       local_options.push({
           answer: '',
           correct: false,
       })
       this.options = local_options
   },
}

In Vue.js, the communication between parent and child components is one-way. It is important not to mutate props received from parents as it can trigger a warning when working in strict mode.

Data should flow from parent to child using props, while data from child to parent should be communicated via events.

A recommended approach is to handle data manipulation within the child component by storing data locally, emitting events to the parent only when necessary:

props: ['options'],

data() {
    return {
        localOptions: []
    };
},

mounted() {
    this.localOptions = [...this.options];
},

watch: {
    options: {
        deep: true,
        handler() {
            this.localOptions = [...this.options];
        }
    }
},

methods: {
    updateOption(index, value) {
        this.localOptions[index].answer = value;
        this.$emit('updated', this.localOptions);
    },

    removeOption(index) {
        this.localOptions.splice(index, 1);
        this.$emit('updated', this.localOptions);
    },

    addOption() {
        this.localOptions.push({
            answer: '',
            correct: false
        });
        this.$emit('updated', this.localOptions);
    },
},

In the parent component, you can listen for these events from the child component:

<multi-options-component :options="options" @updated="doSomething" />

....
methods: {
    doSomething(options) {
         // Perform certain actions here
    }
}

It is not recommended to change the props directly from within a component. According to the documentation, this practice prevents child components from unintentionally modifying the state of parent components, which could complicate the data flow of your application.

Instead, you should emit custom events from the child component:

updateOption(index, value) {
    this.$emit("myUpdateEvent", { index, value });
}
removeOption(index) {
    this.$emit("myRemoveEvent", { index });
}
addOption() {
    this.$emit("myAddEvent");
}

Then in the parent component, listen for these events and update the original array that is passed as a prop to the child component:

<multi-options @myAddEvent="handleAddEvent()" @myUpdateEvent="handleUpdateEvent($event.index, $event.value)" @myRemoveEvent="handleRemoveEvent($event.index)" :options="myOptions"/>

data() {
    return {
        myOptions: [],
    }
},
methods: {
    handleUpdateEvent(index, value) {
        this.myOptions[index].answer = value
    },
    handleRemoveEvent(index) {
        this.myOptions.splice(index, 1);
    },
    handleAddEvent() {
        this.myOptions.push({
                answer: '',
                correct: false,
            });
    }
}