vue 메뉴 클릭시 해당 컴포넌트로 스크롤 이동

<template>
  <div class="wrap">
    <header>
      <div class="header_wrap">
        <div>뷰</div>
        <ul>
          <li @click="scrollToSection('section1')">section1</li>
          <li @click="scrollToSection('section2')">section2</li>
          <li @click="scrollToSection('section3')">section3</li>
        </ul>
      </div>
    </header>
    <Section1 ref="section1" />
    <Section2 ref="section2" />
    <Section3 ref="section3" />
  </div>
</template>
  <script>
import Section1 from "../components/Section1.vue";
import Section2 from "../components/Section2.vue";
import Section3 from "../components/Section3.vue";

export default {
  name: "HomeView",
  components: {
    Section1,
    Section2,
    Section3,
  },
  data() {
    return {};
  },
  methods:{
    scrollToSection(refName) {
      this.$refs[refName].$el.scrollIntoView({behavior: "smooth"});
    },
  }
};
</script>