How to pass a list element to an array value and keep them in sync (solved)?

Question

Vue.js

There is a list

<ul v-for="arrTest ">
<li id="el-1">1</li>
<li id="el-2">2</li>
<li id="el-3">3</li>
<li id="el-4">4</li>
<li id="el-5">5</li>
</ul>

var arrTest = [
  {id:1,name:'name1',val:10},
  {id:2,name:'name2',val:7},
  {id:3,name:'name3',val:7},
  {id:4,name:'name4',val:11},
  {id:5,name:'name5',val:1}
];

those. there is already a ready list of elements.
Now if, when sorting the arrTest array by the value val , the elements should also change ul.
Is it possible to implement this?
Here is the fiddle https://fiddle.jshell.net/michenus/gm585o3r/
The task is to match the existing strings to the array. So that the rows are sorted when the array is sorted.
Solution with text parameters here https://fiddle.jshell.net/4tvwjxw6/

<li id="el-2" v-bind:text-content.prop="arrTest[1].name">name1</li>

those. now there is a default value.
Vue.js doesn't work with DOM - i.e. does not move, removes (by function) them, etc., but processes the values ​​and substitutes them?
did I understand correctly?

Answer 1

put down v-key and that's it