vue.js-在不在v-for循环中显示的方法(单击)中创建的值

我想让程序获取一些数据 @click 然后显示在 v-for 循环。

单击按钮后,数据显示在控制台中,但在页面上看不到任何显示。

是因为正在创建数据吗 之后 元素已呈现? 如何使Vue重新呈现循环以显示获取的数据?

Codepen: https://codepen.io/x84733/pen/jKxQKo?editors=1010

<v-btn @click="fetchData">
  fetch propeties 
</v-btn>

<h2>Properties:</h2>
<div v-for="item in properties">
  <div>{{item.title}}: {{item.value}}</div>
</div>

...  

data () {
  return {
    properties: {}
  }
},
methods: {
  fetchData () {
    var nameObj = {'title': 'name'}
    var sizeObj = {'title': 'size'}

    nameObj['value'] = 'file.txt'
    sizeObj['value'] = 12

    this.properties['name'] = nameObj
    this.properties['size'] = sizeObj

    console.log(this.properties)
  }
}