UI is not updated after state change

[elezhnev]

Please help me figure it out. I tried different options. What's wrong with my script?
The problem is the following. There is a list of friends. It is displayed twice in the UI. There is an editable Username field and a button for adding an entry ("add friend") to the repository. When editing the Username field and clicking the "addfriend" button, the data in the repository changes accordingly. But, there is no change of values in the UI lists. I ask for help.
Below is the code.

File start.html

    <div id="app">
    </div>
	
    <script defer type="module">
	import { app as comp01 } from "../comp01.js"
    	comp01.mount("#app");
    </script>

File comp01.js

import { createApp, compile, h } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
import { createPinia } from 'https://cdn.jsdelivr.net/npm/pinia@2/+esm'
import { createORM, useRepo, Model, mapRepos } from "https://cdn.jsdelivr.net/npm/pinia-orm/+esm"

const templ = '
  <div>
      <div>
        <button @click="addfriend" class="btn-link">Add Friend</button>
      </div>
      <div class="container">

		  <h2>My Friend List</h2>
		  <table class="table table-striped">
		    <thead>
		      <tr>
		        <th>Username</th>
		        <th>Fullname</th>
		        <th>Age</th>
		        <th>Email</th>
		      </tr>
		    </thead>
		    <tbody>
		      <tr v-for="friend in friend_list" :key="friend.id">
		        <td><input v-model="friend.Username" /></td>
		        <td>{{ friend.Fullname }}</td>
		        <td>{{ friend.Age }}</td>
		        <td>{{ friend.Email }}</td>
		      </tr>
		    </tbody>
		  </table>
		</div>
      <div class="container">
		  <h2>My Friend List (mirror)</h2>
		  <table class="table table-striped">
		    <thead>
		      <tr>
		        <th>Username</th>
		        <th>Fullname</th>
		        <th>Age</th>
		        <th>Email</th>
		      </tr>
		    </thead>
		    <tbody>
		      <tr v-for="friend in friend_list" :key="friend.id">
		        <td><input v-model="friend.Username" /></td>
		        <td>{{ friend.Fullname }}</td>
		        <td>{{ friend.Age }}</td>
		        <td>{{ friend.Email }}</td>
		      </tr>
		    </tbody>
		  </table>
		</div>
  </div>
'

const compiledTemplate = compile(templ);


export class Friend extends Model {

  static entity = "friends";

  static fields() {
    return {
      id: this.uid(),
      Username: this.string(""),
      Fullname: this.string(""),
      Age: this.string(""),
      Email: this.string(""),
    };
  }
} 
const pinia = createPinia().use(createORM());
const useRepo1 = useRepo(Friend, pinia);
window.useRepo1 = useRepo1;
export const app = createApp({
  created() {
	  useRepo1.save([{Username: "UN1", Fullname: "FN1", Age: 21}, {Username: "UN2", Fullname: "FN2", Age: 25}])
  },
  computed: {
    friend_list () {
      return useRepo1.all()
    }
  },
  methods: {
    addfriend() {
	      useRepo1.save({
		    Username: "NewUserName",
	        Fullname: "Non",
	        Age: "99",
	        Email: "",
	      });
      console.log(useRepo1.all());
    }
  },
  render(createElement) {
  	    	return compiledTemplate.call(this, createElement);
  	  	},

})

app.use(pinia)

[CodeDredd]

@elezhnev This is not a pinia-orm issue. But you can find a clue and answer there -> https://stackoverflow.com/questions/42908525/vue-warn-property-or-method-is-not-defined-on-the-instance-but-referenced-dur

I am not an total expert with compile but it seems you are accessing variables in the template which are only defined in the root app. That's why the computed doesn't work correctly