How to fix Vue 3 template compilation error : v-model value must be a valid JavaScript member expression?

Question

I am working on a vue project and the vue version is 3.0 And recently I can see these many warnings for some reason.

Template compilation error: v-model value must be a valid JavaScript member expression

I guess it is because I am using long v-model variable name like this.

<textarea v-model="firstVariable.subVariable.subVariableKey" readonly></textarea>

Please let me know if any idea.

Thanks in advance

This is the component and template code.

var myTemplate = Vue.defineComponent({
    template: '#myTemplate',
    
    data() {
        return {
          firstVariable: {}
        }
    },
    
    mounted() {
        loadData();
    },
    
    methods:{
      loadData() {
          axios.get(MY_ROUTES).then(res => {
              // let's suppose res.data is going to be {subVariable: {subVariableKey: "val"}} 
              this.firstVariable = res.data;        
              
          })
      }
    }
    
});

// template.html

<script type="text/template" id="myTemplate">
    <div class="container">
      <textarea v-model="firstVariable.subVariable?.subVariableKey"></textarea>
    </div>
</script>

Answer 1

You are adding a new property to an object which is not reactive.

Vue cannot detect property addition or deletion. Since Vue performs the getter/setter conversion process during instance initialization, a property must be present in the data object in order for Vue to convert it and make it reactive. For example:

Source

Instead of

this.firstVariable = res.data;

Use

this.$set(this.firstVariable, 'subVariable', res.data.subVariable);

Answer 2

In order that your property go reactive you've to define its full schema :

  data() {
    return {
      firstVariable: {
        subVariable: {
          subVariableKey: ''
        }
      }
    }
  },

and use it directly without optional chaining

v-model="firstVariable.subVariable.subVariableKey" because v-model="firstVariable.subVariable?.subVariableKey" malformed expression like v-model="a+b" like this test

Example

var comp1 = Vue.defineComponent({
  name: 'comp1',
  template: '#myTemplate',

  data() {
    return {
      firstVariable: {
        subVariable: {
          subVariableKey: ''
        }
      }
    }
  },

  mounted() {
    this.loadData();
  },

  methods: {
    loadData() {

    }
  }

});

const {
  createApp
} = Vue;
const App = {
  
  components: {
    comp1
  },
  data() {
    return {

    }
  },
  mounted() {
    
  }
}
const app = createApp(App)
app.mount('#app')

<script src="https://unpkg.com/vue@3.0.0-rc.11/dist/vue.global.prod.js"></script>

<div id="app" >
  vue 3 app
  <comp1 />
</div>
<script type="text/template" id="myTemplate">
  <div class="container">
    <textarea v-model="firstVariable.subVariable.subVariableKey"></textarea>
    <div>
      {{firstVariable.subVariable.subVariableKey}}
    </div>
  </div>
</script>