Vue多维数组修改某一值后页面不渲染的问题

Question

我大概简化一下我的业务，用通俗点语言去描述：
业务：“今天去哪”
后端取回数据：

[{省份：广东,城市：深圳}，{省份：广东，城市：广州}...]

在前端需要这样去显示页面：
以省份为大标签（或者说叫一级），下面包着各种城市
那么处理过后就是

{广东：{
    城市列表：[{城市：广州，去不去：false},...],
    其他数据:...
    },
    .....
}

那么我想修改的值其实是 “去不去” 这一项数据（它其实被checkbox绑定着）
但是遇到了问题，
无论是 vm.set 还是直接修改，
我都无法触发页面的更新
附上操作代码

//index请想象成省份，indexs想象为城市，chose想象为去不去
this.$set(this.feeList[index].data[indexs],
        'chose',
        !this.feeList[index].data[indexs].chose)

在data的声明里我只能把 feeList 声明为一个空对象

请问有没有什么方法可以在我修改 最底层的 chose 的时候触发页面更新？

最后附上HTML代码

<div v-for="(item,key) in feeList" :key="key">
        <div>
          <div>{{item.省份名}}</div>
       </div>
        <div>
          <div>城市</div>
          <div>出行费用</div>
        </div>
        <div
          v-for="(items,keys) in item.城市列表" :key="keys"
          @click="触发改变的方法"
        >
          <div v-show="item.是否选择此省份" @click="展示用的方法">
            <cube-checkbox v-model="items.去不去">{{items.去不去}}</cube-checkbox>
          </div>
      </div>

补充一下，items.去不去 会在 item.是否选中此省份 发生变化的时候更新状态

11:40补充:
严格意义上来说我这个更像是深度跟踪（应该是这么叫）的问题不是多维数组...不过某种意义上是差不多的

Answer 1

可以这样做:

//每次修改数据之后，也可以不用this.$set来修改,更新DOM,调用forceUpdate()方法。
this.$forceUpdate();

Answer 2

初始化的时候v-model绑的item.去不去是不是undefined？

Answer 3

虽然 夕水 的强制更新界面是可以在不修改原数据结构的情况下达成我的预期...
但是我个人还是想知道比较深层次的原因是什么
以及这样子刷新对资源开销会不会过大？

午休后思考了一个小时后，
由于没有现成的答案
决定把 chose 也就是选不选，单独分离出来成为一个新数组
用一种比较怪异的方式把它们和 v-for 的checkbox绑定起来