[micscr]

Набросал код компонента:

const MyComponent= {
    template:'<div class="movable" v-bind:style="{left: left+\'px\', top: top + \'px\', borderColor: color}">'
			+ '{{text}}<br> <span class="counter">Счетчик: {{counter}} <button v-on:click="counter++">+1</button></span><br>'
			+ '<button v-on:click="move(\'left\', 0)">&lArr;</button>'
			+ '<button v-on:click="move(\'left\', 1)">&rArr;</button>'
			+ '<button v-on:click="move(\'top\',  0)">&uArr;</button>'
			+ '<button v-on:click="move(\'top\',  1)">&dArr;</button>'
			+'</div>',
    props:['text', 'color', 'propleft', 'proptop'],
    data() {
      return {
                counter: 0,
		left:0,
		top: 0
      }
    },
	created: function(){
		this.left = this.$props.propleft;
		this.top = this.$props.proptop;
		
	},
	methods: {
		move: function(where, isAdd) {
			let add = isAdd ? 10 : -10;
			this[where] = (+this[where] + add);
			console.log(this.propleft);
			console.log(this.left);
			//this.propleft+=10; // ошибка
		}
	}
  };

Вот в работе

Смотрю что в компоненте я не могу менять свои св-ва:

//this.propleft+=10; // ошибка

Поэтому исхитрился сделать как в коде выше.
Следующие вопросы:
1) вот так что ли эти св-ва и понимать, не как "св-ва компонента"(св-ва объекта) а как неизменяемые данные переданные компоненту
2) инициализировать ими свои внутренние данные получается через хук created()?