SmartSelect default value on page Mounted with vue doen't work

Hello, I have an issue with the smart select preview update when the value is pre-set on page load.

Here’s the simplified source code of my page.

    <f7-page name="Test" @page:beforeout="beforeout()">

        <f7-block-title>Select a choice</f7-block-title>
        <div class="list list-strong-ios list-outline-ios list-dividers-ios">
                    <a class="item-link smart-select smart-select-init" id="smart-select-test">
                        <select name="select" v-model="">
                            <option value="A">A</option>
                            <option value="B">B</option>
                            <option value="C">C</option>
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-title">Select a choice</div>
            <f7-button fill round @click="saveData" preloader :loading="isLoading">Save</f7-button>

import { f7, f7ready } from 'framework7-vue'

export default {
    name: 'Test',
    props: {
        f7route: Object,
        f7router: Object
    components: {
    data() {
        return {
            form: {
                "data": {
                    "select": ""
            isLoading: false,
            sm: undefined
    methods: {
        async saveData() {
            try {
                this.isLoading = true
            catch (e) {
            finally {
                this.isLoading = false

        beforeout() {
   = {}
    mounted() { = "A" // or B or C | Debug value
        f7ready((f7) => {
   = f7.smartSelect.create({el:'#smart-select-test'})
  'A') // or B or C | Debug value



The smart select has 3 possible choices: A, B, and C.

Upon page load, inside mounted(), I set a default value for the smart select (using the variable associated with v-model), and then I use to set the value to be displayed in the preview.

Everything works perfectly the first time I enter the page, but if I exit and re-enter, this process doesn’t work, and nothing is displayed in the preview (though the value is correctly selected).

I also tried destroying the smart-select object when leaving the page, but it doesn’t change anything. What am I doing wrong?

I’m using the latest version of fw7 + vue.

@nolimits4web I’ve created a sandbox with a working demo:

Could you please check the issue?
Just enter inside the Add Page, and then go back and enter again

try to use app.smartselect.get("#… ") instead of create(). Create(el) due to docs creates a copy of el. At least it works for me.

@Ranyee I’ve tryied, but get('#') doesn’t find my smartSelect, I don’t know why.
The code is inside f7ready so it should work

Well, i use it much later - in the PageAfterIn event and i have f7Core.