CSS button style does not work using <style> tags with vue.js

Question

I'm currently trying to learn vue.js and trying to add styles to a component. The component itself works, and the functionality (warning message) works the same way, but I can’t get the styles to implement.

(Now I understand that technically I am not using vue.js for style in my first example, but this should show that I tried)

Attempt 1:

<template>
    <div class="container">
        <input id="test-btn" type="button" v-on:click= clicked()> 
    </div>
</template>
<script>
    export default{
        name:  'test-btn',
        methods: {
                clicked: function () {
                    alert("Here your message")

                }
            }
    }
</script>
<style scoped>
    #test-btn{
        color: #CC00CC;
        width: 150;
        height: 50;
    }
</style>

Although I changed the width and height of the color, the button remains gray in general and does not change the width or height (it just remains a square). but it works when I click on it (at least something works).

Since I could not get this, I tried using the v-bind method.

Attempt 2:

<template>
    <div class="container">
        <input id="test-btn" type="button" v-on:click= clicked() v-bind:style="btnStyle"> 
    </div>
</template>
<script>
    export default{
        name:  'test-btn',
        methods: {
                clicked: function () {
                    alert("Here your message")
                }
            },
        data: {
            btnStyle: {
                color: 'red',
                width: 100,
                height: 50
            }
        }
    }
</script>
<style scoped>
/*  #test-btn{
        color: #CC00CC;
        width: 150;
        height: 50;
    }*/
</style>

v-bind . , , , , ( ). !important css script, .

Answer 1

<button> , CSS. px width height. . CSS .

CSS color . <button>, background: yellow;.

new Vue({
  el: '#app',
  methods: {
    clicked: function() {
      alert("Here your message")
    }
  }
})

#test-btn {
  color: #CC00CC;
  background-color: yellow;
  width: 150px; /* was 150, now 150px */
  height: 50px;
}

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <div class="container">
    <input id="test-btn" type="button" v-on:click="clicked()" value="Click Me">
  </div>
</div>

data v-bind:style ( width: '150px'; height: '50px';). , background: 'yellow'.

new Vue({
  el: '#app',
  data: {
    btnStyle: {
      color: '#CC00CC',
      background: 'yellow',
      width: '100px',
      height: '50px'
    }
  },
  methods: {
    clicked: function() {
      alert("Here your message")
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <div class="container">
    <input id="test-btn" type="button" v-on:click="clicked()" v-bind:style="btnStyle" value="CLICK ME">
  </div>
</div>