How to resize vue 2 cli child component?

Question

Vue.js

Hello, I have a component

<template>
  <div class="frame">
  </div>
</template>
<style lang="scss" scoped>
.frame {
height:100%;
width:100%;
}
</style>
<script>
export default {
  name: "Auth",
};
</script>

and there is a page

<template>
  <div><Auth></Auth></div>
</template>

<style lang="scss" scoped>

Auth {
  width: 50vmin; //не работает
}
</style>

<script>
import Auth from "@/components/Auth.vue";

export default {
  name: "Authorization",
  components: {
    Auth,
  },
};
</script>

but how can i resize the auth block? So that it was not on the whole page?

Answer 1

Because the compiled CSS will eventually try to put a class on the Auth tag, but it will not be in the markup.
Try like this:

... template
  <div><Auth class="Auth"></Auth></div>
...

... styles
.Auth {
  width: 50vmin; //не работает
}
...