How and when does Vue store data in its underlying elements?

I am attempting to make use of the dataset attributes of elements, to enable data to be transferred from one item to another during a drag/drop process. But I am having some odd results depending on how Vues' v-if condition is used. The code below works as expected: if you click the 'move' button, then look at the underlying elements' datasets using the 'inspect' button, the dataset for the second item changes.....

<script setup>
import {  onMounted,ref,reactive } from 'vue'
const thisData = reactive(['AAA','BBB','CCC','DDD','EEE'])
var items = [];
var moves = 0;
onMounted(() => {
items= document.querySelectorAll('.swappable') ;
inspect();
});
function inspect() {
for (let n=0; n < 5; n++)  {
let data = items[n].dataset.transfer;
const elem = document.getElementById(idString(n+100));
elem.innerText = 'id: ' + items[n].id + ' :' + data ;
}
}
function move() {
thisData[1] = thisData[0];
++moves;
}
function localTest(x) {
return x > 2;
}
function globalTest(chip) {
return moves > 0;
} 
function idString(n) {
return 'btn'+n;
}
function dataTransfer(n) {
return 'data stored: '+n;
}
</script>
<template>
<template v-for="(item,n) in thisData" :key="n" >
<button  v-if="localTest(n)"  style="background-color: lightblue;" class="swappable"
:data-transfer = dataTransfer(item)
:id=idString(n)
> {{ item }} 
</button>
<button    v-else   style="background-color: lightgreen;" class="swappable"
:data-transfer = dataTransfer(item)
:id=idString(n)
> {{ item}} 
</button>
<p :id=idString(n+100) >   </p>
</template>
<button  @click="inspect()">Inspect Element Data</button >
<p></p>
<button  @click="move()">Copy btn 1 to btn 2</button >
</template>

... but if the v-if test is changed to globalTest(n) instead of localTest(n), the dataset does not change.
My app needs to use a test using a 'global' (a reactive one in fact) but I also need to access the changed dataset.

The effect can be seen here, by editing the v-if test.

Inspecting the resulting page using the browser toolbox shows that the elements are updating correctly even when using globalTest.

The problem is that you are using references to detached elements, which obviously don't update. You shouldn't store elements in a simple array when using Vue, as Vue sometimes changes and replaces elements when updating the component, causing the references you stored to become obsolete.

Instead, you should use template refs:
> ref is a special attribute, similar to the key attribute discussed in the v-for chapter. It allows us to obtain a direct reference to a specific DOM element or child component instance after it's mounted.

In your case, we can replace var items = [] with var items = ref([]) and all other references to items with items.value, then remove items= document.querySelectorAll('.swappable') ; from onMounted.
We should also add ref="items" to the button.

This resolves issue, as now the references are automatically updated when Vue replaces an element.

Here is the fixed code:

<script setup>
  import {  onMounted,ref,reactive } from 'vue'
  const thisData = reactive(['AAA','BBB','CCC','DDD','EEE'])

  var items = ref([]);
  var moves = 0;

  onMounted(() => {
    inspect();
  });
  function inspect() {
    for (let n=0; n < 5; n++)  {
      let data = items.value[n].dataset.transfer;
      const elem = document.getElementById(idString(n+100));
      elem.innerText = 'id: ' + items.value[n].id + ' :' + data ;
    }
  }
  function move() {
      thisData[1] = thisData[0];
      ++moves;
  }

  function localTest(x) {
        return x > 2;
  }
  function globalTest(chip) {
    return moves > 0;
    
  } 
  function idString(n) {
    return 'btn'+n;
  }
  function dataTransfer(n) {
    return 'data stored: '+n;
  }

</script>

<template>
   <template v-for="(item,n) in thisData" :key="n" >
     <button  v-if="globalTest(n)"  style="background-color: lightblue;" class="swappable"
        :data-transfer = dataTransfer(item)
        :id=idString(n)
        ref="items"
        > {{ item }} 
     </button>
     <button    v-else   style="background-color: lightgreen;" class="swappable"
        :data-transfer = dataTransfer(item)
        :id=idString(n)
        ref="items"
        > {{ item}} 
    </button>
     <p :id=idString(n+100) >   </p>
   </template>
     <button  @click="inspect()">Inspect Element Data</button >
    <p></p>
   <button  @click="move()">Copy btn 1 to btn 2</button >
</template>