Vue использование свойств
 

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

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()?

3) А наблюдение за изменениями св-в нет?
Просто если входной параметр привязываешь к переменной снаружи и хочешь отследить ее изменение, то
так не работает:

watch: {
		propleft: function(newVal, oldVal) { 
			this.left = newVal;
		},

this.propleft — это строка, которая взята из атрибута. Например, если в атрибуте написано "100", то после вашего «сложения» получается "10010".

Свойства (props), данные (data), вычисляемые свойства и методы в конечном счёте оказываются свойствами (геттеры и сеттеры) экземпляра класса Vue — куда могут также включаться «хуки» жизненного цикла, когда компонент объявлен как класс. Как и в любом другом классе, их имена могут конфликтовать.

Если вам не нужно преобразование значении атрибутов, то такой шаг не обязателен. Однако у вас this.left и this.top получают строковые значения, а вы с ними хотите работать как с числами — соответственно такой шаг в данном примере нужен. (преобразование к числу)

Вы можете назвать соответствующие атрибуты также как и имена свойств, тогда не будет повторяющихся данных, которые нужно будет синхронизировать.

https://codepen.io/Malleys/pen/wvKMNRv

У меня такой вариант кучу варнингов в консоль кидает:

Возможно вы используете старый Vue, в котором встречаются такие проблемы. Пример, который я приводил, использует Vue 2.6.11.

У меня тоже 2.6.11, запускаю локально.

Я смотрю что наблюдать изменение св-ва - вроде нет такого функционала.
Вот странненько если честно.
Забиндить какое то св-во на наружные данные, так пожалуйста:

<movable-component text="Eagle" v-bind:propleft="myGlobalLeft" proptop="400" color="Blue"></movable-component>

и в консоли через app.myGlobalLeft можно будет менять то что внутри у компонента, но компонент об этих изменениях не в курсе.

Придумал как это можно сделать:
1) Создается вычисляемое св-во следящее за входным параметром:

computed: {
		forpropleft() {
			return this.propleft;
		}
	},

2) Наблюдение делается уже за этим вычисляемым полем