뷰에서 컴포넌트 또는 DOM에 접근하기 위해 사용하는 속성 ref(),  컴포넌트가 마운트될 때 호출되는 함수, 컴포넌트가 마운트 해제될 때 호출되는 함수 이렇게 3개의 함수를 사용하여 스크롤 조건에 따라서 특정 엘리먼트에 클래스 토글 기능을 넣어본다.

<template>
  <div class="header" :class="{ start: scrolled }"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

//ref
const scrolled = ref(false);

//토글 함수 - 스크롤 top 값이 0 일 때와 아닐 때 토글 
function handleScroll() {
  scrolled.value = window.scrollY > 0;
}

//컴포넌트가 마운트 될 때 호출
onMounted(() => {
  window.addEventListener('scroll', handleScroll);
});

//컴포넌트가 마운트 해제될 때 호출
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});
</script>