Set default value in a smart-select before choice

Questions
1

I have made a hack to set the default value to 3 when the list-item gets loaded.

Is there a better and more framework7-like way to express this?

<template id="page-home">
  <f7-page>
    <f7-navbar title="Home"></f7-navbar>
    <f7-block strong>
      <p>Please take choice!</p>
      <f7-list >

      <f7-list-item ref="ss"  @click="doClick" :title="title" smart-select :smart-select-params="{openIn: 'popover', closeOnSelect: true}">

        <select name="mac-windows" v-model="optionChosen"  >

          <option v-for="(opt) in opts" v-bind:key="opt[0]" v-bind:value="opt[0]" v-bind:selected="(opt[0] == optionDefault)" >{{opt[1] || "hello"}}
          </option>

        </select>
        <div v-if="optionDefault !== ''" class="item-after">{{optionDefault}}</div>
      </f7-list-item>
      </f7-list>
      <p>Option Default: {{optionDefault}}</p>
      <p>Option Chosen: {{optionChosen }}</p>

       <f7-button @click="foo">Set default Option to null</f7-button>

    </f7-block>

  </f7-page>
</template>
<script>
import {
  f7Navbar,
  f7Page,
  f7BlockTitle,
  f7Link,
  f7Popup,
  f7List,
  f7ListItem,
  f7Button,
} from "framework7-vue"

export default {
  name: "testoptions",
  components: {
    f7Navbar,
    f7Page,
    f7BlockTitle,
    f7Link,
    f7Popup,
    f7List,
    f7ListItem,
    f7Button,
  },
  data() {
    return {
      optionDefault: null,
      optionChosen: null,
      opts: [[1, "Value 1"], [2, "Value 2"], [3, "Value 3"]],
    }
  },
  computed: {
    title() {
      return "Select a value. Default: " + this.optionDefault
    },
  },
  methods: {
    doClick(event) {
      console.log("event", event)
      this.optionDefault = ""
    },
    foo() {
      console.log(this)
      this.optionDefault = null
      console.log("smartslect", this.$refs.ss)
    },
  },
  mounted: function() {
    this.optionDefault = 3
    this.optionChosen = 3
  },
}
</script>