How to dynamically change component properties in vue outside of it?

Question

Vue.js

Given the code that changes the props of the component dynamically, but here it changes them through the properties of el #app.

<div id="app">
        <input type="text" v-model="width">
        <br>
        <br>
        <input type="text" v-model="height">
        <br>
        <br>
        <br>
        <br>
        <br>
        <test :width="width" :height="height"></test>
    </div>
    <script>
    Vue.component('test', {
        template: '<div><input :value="width" type="text"><br><br><input :value="height" type="text"></div>',
        props: ['width', 'height']
    })
    new Vue({
        el: '#app',
        data: {
            width: 0,
            height: 0
        }
    });
    </script>

Is it possible to change component properties without properties in el #app? Like, for example, like this:

<div id="app">
        <input type="text" v-model="width(чтобы бралось с компонента как-нибудь)">
        <br>
        <br>
        <input type="text" v-model="height(чтобы бралось с компонента как-нибудь)">
        <br>
        <br>
        <br>
        <br>
        <br>
        <test></test>
    </div>
    <script>
    Vue.component('test', {
        template: '<div><input :value="width" type="text"><br><br><input :value="height" type="text"></div>',
            data: function(){
       return{
         width:0,
         height:0
         } 
       }
    })
    new Vue({
        el: '#app'
    });
    </script>

Answer 1

In the test component, add a data section and write these properties in it.