title: How do I watch for onChange of specific select menu that was dynamically generated?
body: <p>I have a row of 3 inputs. It lay out like this:</p>
  <blockquote>
  <p>Attribute (select) &gt; Operators (select)  &gt; Value (text)</p>
  </blockquote>
  <p>UI look like this:</p>
  <p><a href="https://i.stack.imgur.com/i6Bp5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/i6Bp5.png" alt="enter image description here" /></a></p>
  <p>Code for that:</p>
  <pre><code>&lt;v-row v-for=&quot;(rule, index) in rules&quot; :key=&quot;index&quot;&gt;
      &lt;v-col cols=&quot;12&quot; sm=&quot;6&quot; md=&quot;3&quot;&gt;
          &lt;v-select
              dense
              outlined
              item-text=&quot;name&quot;
              item-value=&quot;id&quot;
              label=&quot;Attribute&quot;
              v-model=&quot;form.values.attributes&quot;
              :items=&quot;attributes&quot;
          &gt;&lt;/v-select&gt;
      &lt;/v-col&gt;
  
      &lt;v-col cols=&quot;12&quot; sm=&quot;6&quot; md=&quot;2&quot;&gt;
          &lt;v-select
              outlined
              dense
              item-text=&quot;name&quot;
              item-value=&quot;id&quot;
              label=&quot;Operator&quot;
              v-model=&quot;rule.operator&quot;
              :items=&quot;operators&quot;
          &gt;&lt;/v-select&gt;
      &lt;/v-col&gt;
  
      &lt;v-col cols=&quot;12&quot; sm=&quot;6&quot; md=&quot;4&quot;&gt;
          &lt;v-text-field
              dense
              outlined
              label=&quot;Values&quot;
              v-model=&quot;rule.value&quot;
          &gt;&lt;/v-text-field&gt;
      &lt;/v-col&gt;
  &lt;/v-row&gt;
  </code></pre>
  <p>The operator menu is dynamically populated based on API based on the selected attribute.</p>
  <p>I have <code>v-model=&quot;form.values.attributes&quot;</code>, and my watch to call the API for the operators</p>
  <pre><code>watch: {
      'form.values.attributes'() {
          let data = {
              $root: 'rules'
          }
          axios.defaults.headers['Content-Type'] = 'application/json'
          axios.post(window.MTS_URL, data).then((response) =&gt; {
              this.operators = response.data.operators
          })
      }
  }
  </code></pre>
  <p>This works great with one row.</p>
  <p>But when I clicked Add, I appended another row, and I need to support multiple rows.</p>
  <p><a href="https://i.stack.imgur.com/qzX6I.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qzX6I.png" alt="enter image description here" /></a></p>
  <p><strong>How do I watch for onChange of specific select menu ?</strong></p>
  <hr />
  <p>I was thinking to move my</p>
  <pre><code>v-model=&quot;form.values.attributes&quot;
  </code></pre>
  <p>to</p>
  <pre><code>v-model=&quot;rule.attribute&quot;
  </code></pre>
  <p>but is it the right thing to do ?</p>