Cannot set value for f7-list-input for datetime-local

I am writing a test program to check out the date input. I cannot set the value of the datepicker. The date popup sets the value but when it returns it replaces the old value. Tried a lots of things but could not make it to work.

<template>
    <f7-page>
        <f7-list-input
              label="Test Date"
              type="datetime-local"
              placeholder="please choose..." 
              :value="date1"
              @input="changeDate"
            >
            </f7-list-input>     
    </f7-page>
  </template>

  <script setup>
  import { f7Page, f7ListInput } from 'framework7-vue';  
  import {ref} from "vue";

  let date1 = ref("")
  date1 = "2023-01-01T05:05"

  const changeDate = (ev) => {
    console.log("event changed: ", ev.target.value) 
    date1 = ev.target.value
  }

  </script>

here => flamboyant-star-5pwz4m - CodeSandbox