title: vue component react to changes in vue data object
body: <p>I have some raw html generated on the server side, and I would like this to be reactively updated using the Vue framework. </p>
  
  <p>I first thought that v-html would do the job, but this doesn't work as v-html doesn't react to changes in vue data values.</p>
  
  <p>Apparently components are one way of achieving this, however I can't quite figure out how to link the content of a component to the data of the Vue object.</p>
  
  <hr>
  
  <p>Say I have a Vue data value called <code>table_html</code>, and this was a table ready to be rendered in the page, how would I create a component that would react to changes in <code>table_html</code>?</p>
  
  <p>Here's something that doesn't work. (It seems that when calling self = this, self becomes the vue-component, how do I reference its parent? I.e. the <code>page</code> object?)</p>
  
  <pre><code>page = new Vue({
  
    components: {
      'table-element': {
        template: "&lt;div&gt;{{ table_html }}&lt;/div&gt;",
        data: function() {
          self = this; // References the component, not the parent
  
          return self.table_html // How to reference the Vue bound data?
  
        }
      }
    },
  
    el: "#container",
  
    data: {
      table_html: "&lt;table&gt;...table contents &lt;/table&gt;
    }
  </code></pre>