title: vue js access property dynamically
body: <p>I am using vuejs two way binding to change a property in another component, by emiting an event.</p>
  <p>This is how I send the event from cmponent 1:</p>
  <pre><code>&lt;input
      v-model=&quot;form.title&quot;
      @keyup=&quot;$root.$emit('updateItemEvent', {
          key: 'section.title',
          value: form.title
      })&quot;
      type=&quot;text&quot;
  &gt;
  </code></pre>
  <p><strong>I want to use the same event in the componsnt many times with different &quot;key&quot; and &quot;value&quot;.</strong></p>
  <p>Here is component 2 where I listen to the event</p>
  <p><strong>NOTE: section object could be in <em>data</em> or <em>props</em></strong></p>
  <pre><code>data() {
      return {
          section: {title:'old title', ...},
      },
  },
  
  mounted() {
      this.$root.$on('updateItemEvent', (data) =&gt; {
          // data variable structure is: {key:'section.title', value:'new modified title'}
          // data.key // is a key in this component data
          // data.value // the new value I want to assign to the data.key in this component
          //this is the problem, I want to access a property dynamically by name.
          //eg. this.section.title should be accessible like this &quot;this.{data.key}&quot;
          this.data.key = data.value// ---&gt; this is the error, how to do something like this?
      })
  },
  </code></pre>
  <p><strong>how to access a property by name dynamically like <code>this.data.key</code></strong></p>