How to modify the editor value, modify the files editor content in the store is not synchronized,

[ckvv]

<script setup>
import '@vue/repl/style.css';
import { Repl, ReplStore } from '@vue/repl';
import Monaco from '@vue/repl/monaco-editor';
import { ref, watch } from 'vue';

const code = ref(`<template>11</template>`)

const store = new ReplStore();
watch(code, (v) => {
  store.setFiles({'src/App.vue': v})
}, {
  immediate: true
});
</script>

<template>
  <div>
    <input type="text" v-model="code">
    <Repl :editor="Monaco" :store="store" :clear-console="false" />
  </div>
</template>

<style>
  .editor {
    min-height: 300px !important;
  }
</style>

[hunter2009pf]

just add one more line, then the preview will change

import { Repl, useStore, type ImportMap, Preview } from '@vue/repl'

store.setFiles({
  'src/App.vue': `<template>
        <div id="app">
          <h1>Hello Vue3</h1>
        </div>
      </template>`,
})
Preview.reload()