vue数据双向绑定,新增参数记录一些问题

<template>
  <div class="hello">
    <p>所有车位:{{total}}</p>
    <p>虚拟车位:{{this.form.virtual}}</p>
    <p>固定车位:{{this.form.fixedparking}}</p>
    <button @click="form.virtual++">virtual++</button>
    <button @click="form.fixedparking++">fixedparking++</button>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return {
      form:{
        virtual:10,
      }
    }
  },
  mounted(){
      this.getparms()
  },
  methods:{
    //这里给form重新赋值一个属性这个属性双向绑定是失效的
    getparms(){
      this.form.fixedparking = 2
    },
    changeid(){
      this.form.fixedparking++
    }
  },
  computed:{
    total(){
      return this.form.fixedparking+this.form.virtual
    }
  }
}
</script>

需要通过Vue.set的方法来给form添加属性才会双向绑定上

getparms(){
    Vue.set(this.form,'fixedparking',3)
},