title: Vue 3 Dynamically set selected option of select form element
body: <p>Using Vue 3, how can I dynamically set the <code>selected</code> option when the data value does not match an available option value?</p>
  <p><strong>Condition:</strong></p>
  <p>If Florida (FL) is the stored data value for state, and the country is changed from United States (US) to Canada (CA), the State's option value becomes blank. Instead, I would like for the placeholder item to show as the 'selected' option when there is no match.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
      &lt;div&gt;
          &lt;label v-if=&quot;data.country === 'US'&quot;&gt;
              State
              &lt;select v-model=&quot;data.state&quot;&gt;
                  &lt;option value=&quot;&quot; disabled&gt;state&lt;/option&gt;
                  &lt;option
                      v-for=&quot;(state, i) in states&quot;
                      :value=&quot;state['code']&quot;
                      :key=&quot;i&quot;
                      &gt;{{ state['name'] }}&lt;/option
                  &gt;
              &lt;/select&gt;
          &lt;/label&gt;
          &lt;label v-if=&quot;data.country === 'CA'&quot;&gt;
              Province
              &lt;select v-model=&quot;data.state&quot;&gt;
                  &lt;option value=&quot;&quot; disabled&gt;province&lt;/option&gt;
                  &lt;option
                      v-for=&quot;(province, i) in provinces&quot;
                      :value=&quot;province['code']&quot;
                      :key=&quot;i&quot;
                      &gt;{{ province['name'] }}&lt;/option
                  &gt;
              &lt;/select&gt;
          &lt;/label&gt;
      &lt;/div&gt;
  
      &lt;label&gt;
          Country
          &lt;select v-model=&quot;data.country&quot;&gt;
              &lt;option value=&quot;&quot; disabled&gt;country&lt;/option&gt;
              &lt;option
                  v-for=&quot;(country, i) in countries&quot;
                  :value=&quot;country['code']&quot;
                  :key=&quot;i&quot;
                  &gt;{{ country['name'] }}&lt;/option
              &gt;
          &lt;/select&gt;
      &lt;/label&gt;
  &lt;/template&gt;
  
  &lt;script lang=&quot;ts&quot;&gt;
  import { defineComponent } from 'vue'
  import data from '...'
  import states from '...'
  import provinces from '...'
  import countries from '...'
  
  export default defineComponent({
      setup() {
          ...
          return { data, states, provinces, countries }
      },
  })
  &lt;/script&gt;
  </code></pre>