Why doesn't it switch to another component?

Question

Vue.js

<div class="box_profile">
      <div class="box_left">
        <a href="#">Settings</a>
        <a href="#" @click="switchActive('users')">Users</a>
        <a href="#"   @click="switchActive('history')" class="active">History</a> </div>
      <div class="box_right">
<components :is="users"> </components>

<script>
import users from "~/components/users.vue"
  import history from "~/components/history.vue"
 components: {
        users,
        history
      },
      data() {
        return {
          active: 'users',

        }
      },
methods: {
        switchActive: function(view) {
          this.active = view;
          console.log("ok")
        }
      },
    }
</script>

throws an error
Property or method "users" is not defined on the instance but referenced during render.

Answer 1

probably a typo here

<components :is="users"> </components>
<components :is="active"> </components>

Example jsfiddle.net/4813uLdj
.