title: Update component when prop changes
body: <p>How do I force a component to re-render when a prop changes? </p>
  
  <p>Say I have a component which holds: </p>
  
  <pre><code>&lt;test-sub-component :layoutSetting="layoutSetting"&gt;&lt;/test-sub-component&gt;
  </code></pre>
  
  <p>And I have my data object like so:</p>
  
  <pre><code> data() {
    return {
      layoutSetting: 'large'
    }
  },
  </code></pre>
  
  <p>Then with a click on a button i would like to change the settings of the prop passed, and the component should re-render, something like</p>
  
  <pre><code>&lt;button @click="changeLayout"&gt;Change Layout&lt;/button&gt;
  </code></pre>
  
  <p>And a method like </p>
  
  <pre><code>changeLayout() {
          this.layoutSetting = 'small';
      },
  </code></pre>
  
  <p>This changed the data object, but it doesnt re-render the component with the changed prop? </p>