For those of you coming here now, I think below is the updated way for using the <script setup>
<script setup>
import { computed, onMounted, watch, ref } from 'vue';
import { useMousePosition } from '../functions/useMousePosition';
import { useToggle } from '../functions/useToggle';

let props = defineProps(['title']);

const pos = useMousePosition();

const { isVisible: isItemsLeftVisible, toggleVisible: toggleItemsLeft } = useToggle();
const { isVisible: isMouseVisible, toggleVisible: toggleMouseVisible } = useToggle();

const todoFromInput = ref('');

const todoId = ref(4);

const todos = ref([
    {
        id: 1,
        description: 'Finist Screencast',
        isComplete: false,
    },
    {
        id: 2,
        description: 'Learn Vue 3',
        isComplete: false,
    },
    {
        id: 3,
        description: 'Paint wall',
        isComplete: false,
    },
]);

let addTodo = () => {
    todos.value.push({
        id: todoId.value,
        description: todoFromInput.value,
        isComplete: false,
    });

    todoId.value++;
    todoFromInput.value = '';
};

let deleteTodo = (id) => {
    todos.value = todos.value.filter((todo) => todo.id !== id);
};

const itemsLeft = computed(() => todos.value.filter((todo) => !todo.isComplete).length);

onMounted(() => {
    console.log('Todo mounted');
    console.log(props.title);
});

watch(
    () => todoId.value,
    (newValue, oldValue) => {
        console.log('New value: ', +newValue);
        console.log('Old value: ', +oldValue);
    }
);
</script>