title: Vue - pass reactive prop from parent to child?
body: <p>I know this has been asked a lot here in different forms, but I'm having trouble getting a child to be reactive to changes made in the parent. I have tried key changing, but that doesn't seem to work in this case. </p>
  
  <p>Shouldn't a child component know to re-render itself when a prop it is receiving has changed? </p>
  
  <p>For example (this is not my exact component, just an example of the data flow):</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="parent"&gt;
      &lt;h1&gt;Sort By&lt;/h1&gt;
      &lt;button @click"handleClick('alpha')"&gt;Alphabetical&lt;/button&gt;
      &lt;button @click"handleClick('price')"&gt;Price&lt;/button&gt;
      &lt;ChildComponent :sortBy="sortBy" :key="keyChangingDoesntWork" /&gt; // doesn't update when 'sortBy' changes.
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  // ...
  name: "parent",
  data(){
    return{
      sortBy: 'alpha',
    }
  },
  methods: {
    handleClick(by){
      if (by === 'alpha') {
        this.sortBy = 'alpha'
      } else {
        this.sortBy = 'price'
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>// child</p>
  
  <pre><code>&lt;script&gt;
    props: {
      sortBy: String
    }
    updated() {
      console.log(this.sortBy); // need this to change when buttons are clicked in parent
    }
  &lt;/script&gt;
  </code></pre>