How to correctly port native JS to Vue.js?

Question

JavaScript

Generally. Let's say we have this code:

var a = document.querySelector("#a");
var b = a.querySelectorAll(".c");

somethingDo(a, b);

a.onchange = function() {
  elseSomethingDo(a, b);
}

function somethingDo(a, b) {
  //...
}

function elseSomethingDo(a, b) {
  var d = b.length;
  var e = a.value;
  //...
}

At the beginning, let's say, we drive some DOM elements into variables, perform some manipulations with them, hang an event handler, when the handler is called, we again perform some manipulations with a set of elements.
Where to shove all this into Vue?
Well, for example, you can (or even need, according to the documentation) to hang the handler directly in the html code, although before that we were taught all our lives that this is not semantically. What to do with the rest? Where to get DOM elements? Where to do some manipulations with them? in data? computed? mounted? methods?

Answer 1

Correctly port like this:
- learn Vue.
- write an application (new) on it that does the same.
It is incorrect to port like this:
- attempts to "shove" something somewhere, so that you don't write code, don't read the dock, and it somehow works by itself.