【Vue3】 Tres formas de abordar el problema de la reasignación de variables reactivas que no responden en Vue3 (resuelto)

La primera solución: envuelva el valor de la variable en el objeto y agregue {datos: valor de la variable}

1.html

  <div>a=【{
   
   {a.data}}】</div>
  <div>-----------------</div>
  <div>【{
   
   { b.data[0] }}】</div>
  <div>【{
   
   { b.data[1] }}】</div>
  <div>【{
   
   { b.data[2] }}】</div>

2. Definir variables reactivas.

    let a=reactive({data:"110"});

    let b=reactive({data:[0,1,2]});

3. Reasignar

 

      a.data="119";
      b.data=[...[9,8,7]];

 Segunda solución: ref.

1.html

  <div>a=【{
   
   {a}}】</div>
  <div>-----------------</div>
  <div>【{
   
   { b[0] }}】</div>
  <div>【{
   
   { b[1] }}】</div>
  <div>【{
   
   { b[2] }}】</div>

2. Definir la variable de referencia

    let a=ref("110");
    let b=ref([0,1,2]);

3. Asignación

      a.value="119";
      b.value=[...[9,8,7]];

La tercera opción: empujar (no recomendado)