Dynamic rendering of a component in vue?

Question

Vue.js

<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>

There is such a code, I'm trying to dynamically render a component in vue cli, when I click on the "Start" button (it is necessary that the login component be drawn as a popup window). I get an error:
[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
How to fix, tell me plz

Answer 1

<component :is="component"></component>

Answer 2

ps i think i found a solution https://github.com/javisperez/vuedals