title: Vue: How to bind property dynamically to a new DOM element
body: <p>Say, I have a component with the following template:</p>
  
  <pre><code>&lt;div id="root"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Then somehow I call the code that appends a new element to it (using jQuery for now):</p>
  
  <pre><code>$('#root').append('&lt;div id="a1" v-bind:styles="styles.a1"&gt;&lt;/div&gt;')
  </code></pre>
  
  <p>where "styles.a1" is just an object from component's data:</p>
  
  <pre><code>data() {
     return {
        styles: { a1: {color: 'red'} }
     };
  }
  </code></pre>
  
  <p>I suppose the newborn element's binding will not work because Vue doesn't know anything about this new element and its binding.</p>
  
  <p>But maybe there is <strong>some</strong> way to implement the desired logic?</p>
  
  <p>PS I know that Vue's nature is to manipulate with data, not DOM but here is the situation I have to deal with.</p>