Example of how Vue and React works when change their states - in react all javascript is executed, in Vue only the template.

react-rerender.js

import React, { useState, useEffect } from 'react';

function App() {
  const [count, setCount] = useState(0);

  // execute each time when click the button
  console.log(Math.random())

  useEffect(() => {
    // execute each time when click the button
    console.log(Math.random())
  });

  return (
    <!-- RERENDER ALL DOM -->
    <div>
      <button type="button" onClick={() => setCount(count + 1)}>
        Click {count}
      </button>
    </div>
  );
}

export default App;

vue-rerender.vue

<script setup>
import { ref, onMounted, watch, computed } from 'vue'

const a = ref(1)

// executed one time only
console.log(Math.random())

onMounted(() => {
  // executed one time only
  console.log('test')
})

const getA = computed(() => {
  return '-->' + a.value
})

const increase = () => {
  a.value = a.value + 1
}

watch(a, () => {
  console.log('a increased')
})
</script>
<template>
  <!-- RERENDER ALL DOM -->
  <div>
    {{ getA }}
    <button type="button" @click="increase()">click</button>
  </div>
</template>

Any changes in Vue triggers the exact amount of re-render. In React, any state change will trigger that entire component sub-tree to re-render.
React rerender full function, but Vue only the template.

Vue

Any imported (child) component into the vue-rerender.vue with same Math.random() functions, will execute only one time regardless each increment!

React

Any imported (child) component into the react-rerender.js with same Math.random() functions, will execute each time on each increment!