diff --git a/kitchen-sink/vue/src/pages/smart-select.vue b/kitchen-sink/vue/src/pages/smart-select.vue
index ac0b8b2a5a..761ffeee26 100644
--- a/kitchen-sink/vue/src/pages/smart-select.vue
+++ b/kitchen-sink/vue/src/pages/smart-select.vue
@@ -66,18 +66,84 @@
         </select>
       </f7-list-item>
     </f7-list>
+
+    <f7-block-title>Vue Model</f7-block-title>
+    <f7-list strong-ios outline-ios dividers-ios class="no-margin-top">
+      <f7-list-item group-title title="Coin flip guess" />
+      <f7-list-item
+        v-model:smart-selection="predictedCoinFlip"
+        title="Predicted outcome"
+        smart-select
+        :smart-select-params="{ openIn: 'sheet' }"
+      >
+        <select name="coin-flip">
+          <option value="heads">Heads</option>
+          <option value="tails">Tails</option>
+        </select>
+      </f7-list-item>
+      <f7-list-button title="Toggle prediction" @click="toggleCoinGuess" />
+      <f7-list-item group-title title="Purchase" />
+      <f7-list-item title="Total amout">
+        <template #after>
+          $15 + ${{ 15 * (tipPercentage / 100) }} ({{ tipPercentage }}%) tip
+        </template>
+      </f7-list-item>
+      <f7-list-item
+        v-model:smart-selection.number="tipPercentage"
+        title="Tip percentage"
+        smart-select
+        :smart-select-params="{ openIn: 'sheet' }"
+      >
+        <select name="tip-1">
+          <option value="10">10% tip</option>
+          <option value="20">20% tip</option>
+        </select>
+      </f7-list-item>
+      <f7-list-item
+        v-model:smart-selection.number="tipPercentage"
+        title="Tip formula"
+        smart-select
+        :smart-select-params="{ openIn: 'sheet' }"
+      >
+        <select name="tip-2">
+          <option value="10">purchase * 0.10</option>
+          <option value="20">purchase * 0.20</option>
+        </select>
+      </f7-list-item>
+    </f7-list>
   </f7-page>
 </template>
 <script>
-import { f7Navbar, f7Page, f7List, f7Block, f7ListItem } from 'framework7-vue';
+import {
+  f7Navbar,
+  f7Page,
+  f7List,
+  f7ListButton,
+  f7BlockTitle,
+  f7Block,
+  f7ListItem,
+} from 'framework7-vue';
 
 export default {
   components: {
     f7Navbar,
     f7Page,
     f7List,
+    f7ListButton,
     f7Block,
+    f7BlockTitle,
     f7ListItem,
   },
+  data() {
+    return {
+      predictedCoinFlip: 'tails',
+      tipPercentage: 20,
+    };
+  },
+  methods: {
+    toggleCoinGuess() {
+      this.predictedCoinFlip = this.predictedCoinFlip === 'tails' ? 'heads' : 'tails';
+    },
+  },
 };
 </script>
diff --git a/src/vue/components/list-item.vue b/src/vue/components/list-item.vue
index 646a47f6be..33b9dcc0eb 100644
--- a/src/vue/components/list-item.vue
+++ b/src/vue/components/list-item.vue
@@ -227,6 +227,7 @@ export default {
     // Smart Select
     smartSelect: Boolean,
     smartSelectParams: Object,
+    smartSelection: [String, Number, Array, Date, Object],
 
     // Links Chevron (Arrow) Icon
     noChevron: Boolean,
@@ -271,6 +272,7 @@ export default {
     'accordion:opened',
     'change',
     'update:checked',
+    'update:smartSelection',
   ],
   setup(props, { slots, emit }) {
     const ListContext = inject('ListContext', {
@@ -362,17 +364,40 @@ export default {
       emit('change', event);
       emit('update:checked', event.target.checked);
     };
+    const onSmartSelectChange = (ss, value) => {
+      emit('update:smartSelection', value);
+    };
 
     useTooltip(elRef, props);
 
     useRouteProps(linkElRef, props);
 
+    let f7SmartSelect = null;
     useSmartSelect(
       props,
-      () => {},
+      (instance) => {
+        f7SmartSelect = instance;
+        if (f7SmartSelect) {
+          if (props.smartSelection !== undefined) {
+            f7SmartSelect.setValue(props.smartSelection);
+          }
+          // register for change event only after setting initial value
+          f7SmartSelect.$el.on('smartselect:change', onSmartSelectChange);
+        }
+      },
       () => elRef.value.querySelector('a.smart-select'),
     );
 
+    watch(
+      () => props.smartSelection,
+      (newValue) => {
+        // eslint-disable-next-line eqeqeq
+        if (newValue === undefined || !f7SmartSelect || f7SmartSelect.getValue() == newValue)
+          return;
+        f7SmartSelect.setValue(newValue);
+      },
+    );
+
     watch(
       () => props.swipeoutOpened,
       (newValue) => {