title: Watching dynamic nested data in Vue.JS?
body: <p>I have a series of checkboxes setup in Vue.js components that are emitting data to my parent element. I want to watch this data for changes and append the data within the object to an API call, in order to filter data.</p>
  
  <p>Here's what my data on the parent element looks like when some items are checked (otherwise it's just an empty object if nothing's checked):</p>
  
  <p><a href="https://i.stack.imgur.com/aCz9T.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aCz9T.png" alt="image of selectedFeatures object"></a></p>
  
  <p>I want to be able to insert this data into an API call that would (in general) look like this, when the data changes:</p>
  
  <pre><code>this.axios.get('http://localhost:8000/api/v1/schools' + 
      for (feature in selectedFeatures) {
          '?features[]=' + feature
      }
  ).then((response) =&gt; {
      this.$root.$emit('searchQuery', response.data);
  });
  </code></pre>
  
  <p>Usually this is pretty easy with the Watch feature of Vue, but since my data is nested in unnamed arrays and generated dynamically, I'm not sure how to do this.</p>