Когда целевое значение зависит от других реактивных переменных и требует сложных вычислений, то можно использовать computed свойства во vue 3 composition api.

Computed свойства в Vue 3 composition api целесообразно использовать, когда у вас есть сложная логика, зависящая от других реактивных переменных, и вы хотите автоматически обновлять это значение при изменении зависимых переменных. Computed свойства также удобно использовать для кеширования результатов вычислений и оптимизации производительности.

Вы не можете просто заменить computed свойства на обычные переменные, так как обычные переменные не будут реактивными и не будут обновляться при изменении зависимых переменных. Для сложной логики, зависящей от других переменных и требующей автоматического обновления, лучше использовать computed свойства.

<code class="javascript">Computed</code> свойства желательно использовать когда нужно отслеживать изменение переменной и затем производить вычисления или иные операции (зависящие от отслеживаемой переменной) результат которых будет сохранен в виде другой переменной. <br/> <br/> Пример из официальной документации: <br/> <br/> <pre><code class="typescript">&lt;script setup&gt;
import { reactive, computed } from 'vue'

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

const publishedBooksMessage = computed(() =&gt; {
  return author.books.length &gt; 0 ? 'Yes' : 'No'
})
&lt;/script&gt;

&lt;template&gt;
  &lt;p&gt;Has published books:&lt;/p&gt;
  &lt;span&gt;{{ publishedBooksMessage }}&lt;/span&gt;
&lt;/template&gt;</code></pre> <br/> <br/> Отличие от <code class="javascript">watch</code> в том что вычисляемые свойства кэшируются на основе их реактивных зависимостей. Это значит что код ниже не будет работать корректно, ведь всегда возвращает время первого вызова, а не актуальное. <br/> <br/> <code class="typescript">const now = computed(() =&gt; Date.now())</code>