javascript - Vue: Component :prop="object[key]" aren't reactive -

i'm trying bind value object prop of component, isn't reactive. i'm using $this.set, doesn't work @ all. here's template:

<div class="grid">   <emoji-card v-for="name in shuffledemoji"     :name="name" :ticked="tickedemoji[name]" :key="name"           @click="tickemoji(name)"   /> </div> 

• shuffledemoji: array<string>

here, tickedemoji object keys being strings, , values being booleans. tickemoji sets tickedemoji[name] name true:

  methods: {     tickemoji (name) {       this.$set(this.tickedemoji, name, true)     }   }, 

that method gets called fine, component doesn't notice changes.

child component:

<template>   <div class="card" @click="$emit('click')">     <img draggable="false" :src="`/static/blobs/${name}.png`">     <img v-show="ticked" class="green-tick" draggable="false"       src="/static/ui/green_tick.png">   </div> </template>  <script> export default {   name: 'emoji-card',   props: ['name', 'ticked'] } </script> 

what doing wrong here? child component never gets updated whenever tickemoji called.

for reason, removing initialization code in beforecreate fixed it. if provide insight on why case, appreciate it.

  async beforecreate () {     let {blobs} = await (await fetch('http://localhost:3000/api/blobs')).json()      // init tickedemoji map (fixes code when loop removed)     (let key of blobs) {       this.tickedemoji[key] = false     }      this.emoji = blobs   }