data: {
circle: document.querySelector(`.circle`)
},
Бессмысленно сохранять ссылки на элементы шаблона. После инициализации экземпляра Vue этот элемент уже не будет частью страницы - исходное содержимое
.app Vue заменит элементами, которые создаст сам. Если хотите иметь доступ к ним, для этого есть
специальный механизм. Т.е., добавляете атрибут ref элементу
.circle:
<div class="circle" ref="circle"></div>
В методе move заменяете
this.circle на
this.$refs.circle:
this.$refs.circle.style.left = `${e.pageX}px`;
this.$refs.circle.style.top = `${e.pageY}px`;
https://jsfiddle.net/4esvu230/
А вообще, ссылка на элемент не нужна:
data: () => ({
coords: [ 0, 0 ],
}),
computed: {
style() {
return {
left: this.coords[0] + 'px',
top: this.coords[1] + 'px',
};
},
},
created() {
document.addEventListener('mousemove', e => this.coords = [ e.pageX, e.pageY ]);
},
<div class="circle" :style="style"></div>
https://jsfiddle.net/70uLyqr4/
