Why can't custom events of a component be listened to when written in a template, and why can't properties be written and bound on a component?

 <div id="app">
        : {{number}}
        <button @click="plusOne(rand1,$event)">2</button>
        <customize-btn  @click.native="minus(rand2)"  ></customize-btn>
    </div>
    <script type="text/javascript">
    var rand1=Math.random()*10;
    var rand2=Math.random()*10;
    var customizeBtn = {
        data: function() {
            return { btnClass: "btn" }
        },
        template: ` <div :class="btnClass"></div>  `,
    }
    var app = new Vue({
        el: "-sharpapp",
        data: {
            message: "hello world",
            number: 3,
            rand1:rand1,
            rand2:rand2
        },
        methods: {
            plusOne: function(num, a) {
               console.log(rand1);
                this.number = this.number + num;
                console.log(":" + this.number);
                this.rand1=Math.random()*10;
                return this.number;
            },
            minus: function(num) {
                console.log(rand2);
                this.number = this.number - num;
                console.log(":" + this.number);
                 this.rand2=Math.random()*10;
                return this.number;
            }
        },
        components: {
            "customizeBtn": customizeBtn
        }
    })
    </script>

found the following situations:

1. Event listeners and style property bindings are written directly on the component tag

<customize-btn  @click.native="minus(rand2)" :class="btnClass" ></customize-btn>

error reporting btnClass is not defined

< hr >

2. Event listeners and style property bindings are written directly in tempalet

template: ` <div  @click.native="minus(rand2)" :class="btnClass"></div>  `,

No error is reported, but the click of the second button is invalid and the event is not tied to

< hr >

3. Event listeners are written in template, style attribute bindings on component tags

<customize-btn  :class="btnClass" ></customize-btn>
template: ` <div  @click.native="minus(rand2)"></div>  `,

error, btnClass is not defined

< hr >

4. The third is the first one. Event listeners are written on component tags and style attribute bindings are written in template, which is normal here.

<customize-btn  @click.native="minus(rand2)"></customize-btn>
template: ` <div :class="btnClass"></div>  `,

< hr >

from the conclusion, event listeners for custom components must be written on component tags, while custom component style attributes (including other properties? ) binding must be in template? is this conclusion correct? Why?

Vue.js

Mar.22,2021