Визуализация ключа и значений объекта через компонент и v-for в VueJS

Question

По сути, у меня есть объект, ключи и значения которого изменяются с помощью других функций.

app=new Vue({
    ...
    data:{
        myObject:{"key1":"value1","key2":"value2"}
    }
})

Я написал компонент, который получает их как реквизиты и отображает их.

Vue.component("my-component",{
    props:['k','v'],
    template:`
        <div>{{k}}:{{v}}</div>
    `    
})

Теперь, когда я пишу это:

<my-component v-for="(value,key) in myObject" v-bind:k="key" v-bind:v="value"></my-component>

И выполняю app.myObject['someKey']='some value', ничего не происходит и без какого-либо консольного сообщения, даже в режиме разработки.
Где яидет не так? Или есть лучший способ визуализации ключа и значений объекта с помощью компонента?

Редактировать: Что-то, что я заметил, когда объект уже заполнен в объекте данных, он прекрасно отрисовывается. Однако, когда внешняя функция изменяет его, изменения не отражаются , если только Я не изменю значение ключа, значение которого уже присутствовало в объекте.

Edit2: https://jsfiddle.net/agentrsdg/xs635ndk/8/

Answer 1

Поэтому я подумал, что обнаружил ошибку и проблему на github (https://github.com/vuejs/vue/issues/10611),), и они быстро ответили решением. Вышеуказанное не работает - ограничение самого JavaScript. Поэтому следует использовать,

app.$set(app.myObject,'newKey','newValue)

или

Vue.set(app.myObject,'newKey','newValue')

Подробнее здесь: https://vuejs.org/v2/guide/list.html#Object-Change-Detection-Caveats

Answer 2

Цикл для детей в Object, как показано ниже.

<div v-for="(value, key, index) in object">

Так же и для ваших кодов.

<my-component
  v-for="(value, key) in myObject"
  v-bind:key-prop="key" // prop name in my-component is keyProp but use key-prop in the parent component
  v-bind:value-Prop="value"
/>

Вот JSFiddle для моего ответа.