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

[wxfred]

• Framework7 version: 8.3.4
• Vue.js version: 3.5.23
• Platform and Target: window11 chrome browser

Describe the bug

smart-select, the text on the list is not updated after changing selected option by script, while the popup selected option is updated correctly.

<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>

At the beginning, shows Option 1, a script will change it to Option 3 after 3 seconds.

3 seconds later, it is still Option 1

while the popup is updated correctly

clicking Option 3 in popup will not change the value outside, unless click Option 2.

[wxfred]

I find a workaround, bind the input.selectedId to the :key of f7-list.

<f7-list class="select-list" :key="input.selectedId">