vue smart-select the text on the list is not updated after changing selected option by script #4339

<script setup>
import { reactive } from 'vue'

let input = reactive({
  selectedId: 1,
  options: [
    {
      id: 1,
      text: 'Option 1',
    },
    {
      id: 2,
      text: 'Option 2',
    },
    {
      id: 3,
      text: 'Option 3',
    },
  ],
})

setTimeout(() => {
  input.selectedId = 3 // change selected option after 3 seconds
}, 3000)
</script>

<template>
  <f7-app>
    <f7-page>
      <f7-list class="select-list">
        <f7-list-item title="Options" smart-select :smart-select-params="{
          openIn: 'popup',
          closeOnSelect: true,
        }">
          <select v-model="input.selectedId">
            <option v-for="obj in input.options" :key="obj.id" :value="obj.id" :selected="input.selectedId === obj.id">{{ obj.text }}</option>
          </select>
        </f7-list-item>
      </f7-list>
    </f7-page>
  </f7-app>
</template>

<style lang="less">
body, html, #app {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
</style>