Динамическое отображение компонента во vue?

<template>
<div>
  <component :is="login"></component>

  <header class="header" >
    <div class="header__logo">
      <a href="index.html"><img height="34" width="130" src="../assets/img/icon2.svg" alt=""></a>
    </div>
    <div class="header__nav">
      <nav class="header__nav__nav">
        <a href="#">О проекте</a>
        <a href="#">FAQs</a>
        <a href="#">
          <button class="btn btn--sm" @click="component='login'">Начать</button>
        </a>
      </nav>
    </div>
  </header>
</div>
</template>

<script>
  import login from './login.vue'

  export default {
    components: {
      login
    },
      data() {
          return {
            component:'login'
          }
      },
    methods: {
        login: function () {
           //????
        }
    }
  }

</script>

Есть такой код, пытаюсь динамически отрендерить компонент во vue cli, при нажатии на кнопку "Начать" (надо, чтобы рисовался компонент login в виде popup окна). Получаю ошибку:

[Vue warn]: Property or method "login" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declari...

found in

---> at src/views/Home.vue
at src/App.vue


Как поправить, подскажите плз