В предыдущем видео мы с вами рассматривали пример, что выводить переменную из уровня данных, в случае script setup, можно просто обычной конструкцией:

<template>

    <div>

        <button @click="count++"></button>

        {{ count }}

    </div>

</template>




<script setup>

const count = 0;

</script>

В скрипте мы просто создали константу. 

Но, если мы попробуем изменять нашу переменную на уровне данных, давайте посмотрим, что получится. Кликая по кнопке, у нас должно увеличиваться число на единицу.

Кликаем по кнопке, но этого не происходит. Почему так? Дело в том, что эта переменная, которая у нас здесь есть (в данном случае, константа), она является не реактивной. Т.е. Vue не считает её реактивной. Мы можем выводить ее в нашем шаблоне, она у нас там доступна, но она у нас не является реактивной переменной. 

Для того, чтобы сделать эту переменную реактивной, мы должны воспользоваться тем же самым методом ref, который мы использовали в опции setup, для того чтобы переменная стала реактивной. 

Оборачиваем ее в этот метед ref и теперь наша переменная стала реактивной.

<script setup>

import {ref} from "vue";

const count = ref(0);

</script>

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