Vue TypeError：尝试更新 Object 属性时无法读取未定义的属性“_wrapper”

Question

I am trying to use a button to update a property of an Object in Vue. The Object is returned by an AJAX query to a database, and the isFetching boolean is then set to false , which attaches the containing div to the DOM. When I try and update the property, I get the following error:

TypeError: Cannot read property '_wrapper' of undefined

Below is my AJAX code:

axios.post("/api/myEndpoint", { id: router.currentRoute.query.id })
    .then((response) => {
        this.activities = response.data.activities;
        this.isFetching = false;
    })
    .catch((errors) => {    
        console.log(errors);
        router.push("/");    
    });          

Here is my HTML:

<div v-if="isFetching">
  <h2>Loading data...</h2>
</div>
<div v-else>
    <div class="row no-gutters">
        <div class="col">
            <div class="d-flex flex-row justify-content-center">
                <h4>Activities</h4>
            </div>
            <div class="custom-card p-2">
                <div class="row no-gutters pb-4" v-for="(activity, index) in activities" 
                 :key="activity.stage_id">
                    <button v-if="!activity.is_removed" class="btn custom-btn" :class="{'hov': 
                     index == 0}" :disabled="index != 0" 
                     @click="markRemoved(activity)">Remove</button>
                </div>
            </div>
        </div>
    </div>
</div>

Finally, here is markRemoved() as called by the button's click listener:

markRemoved(a) {
  a.is_removed = true;
}

When I try and log a in markRemoved() the Object is logged to the console fine, exactly as expected. Having stepped through it in the debugger, the exception is thrown at the point I try and update the is_removed property of the Object.

Does anyone know what I'm doing wrong here?

Note: the id I pass to the AJAX query is a query parameter of Vue Router. This is also set correctly and passed as expected.

Here is an example activity Object:

{date_time_due: "2020-12-09T11:43:07.740Z"
 date_time_reached_stage: "2020-12-02T11:43:07.740Z"
 is_complete: true
 is_removed: false
 selected_option: "Some text"
 stage_id: 1
 stage_name: "Some text"}

The exception is only thrown on the first click of the button.

Answer 1

Posting in case anybody else comes across this error in the future.

Vue requires exactly one root element within a single-file component's <template> tags. I had forgotten about this and in my case had two <div> elements, shown one at a time, conditionally using v-if:

<template>
    <div v-if="fetchingData">
        <h2>Loading data...</h2>
    </div>
    <div v-else>
        <!-- The rest of the component -->
    </div>
</template>

This caused problems with Vue's reactivity, throwing the error whenever I tried to update some part of the component. After realising my mistake, I wrapped everything in a root <div> . This solved the issue for me:

<template>
    <div id="fixedComponent">
        <div v-if="fetchingData">
            <h2>Loading data...</h2>
        </div>
        <div v-else>
            <!-- The rest of the component -->
        </div>
    </div>
</template>