While Vuetify makes datepicker very simple, but timezone not so much.

I did some research, and I found this nice one

HTML

<div class="container">
  <p></p>

  <p>
    <select class="js-Selector"></select>
  </p>

  <ul>
    <li><strong>UTC time:</strong> <span class="js-TimeUtc"></span></li>
    <li><strong>Local time:</strong> <span class="js-TimeLocal"></span></li>
  </ul>
</div>

---

JS

const dateTimeUtc = moment("2017-06-05T19:41:03Z").utc();
document.querySelector(".js-TimeUtc").innerHTML = dateTimeUtc.format("ddd, DD MMM YYYY HH:mm:ss");

const selectorOptions = moment.tz.names()
  .reduce((memo, tz) => {
    memo.push({
      name: tz,
      offset: moment.tz(tz).utcOffset()
    });
    
    return memo;
  }, [])
  .sort((a, b) => {
    return a.offset - b.offset
  })
  .reduce((memo, tz) => {
    const timezone = tz.offset ? moment.tz(tz.name).format('Z') : '';

    return memo.concat(`<option value="${tz.name}">(GMT${timezone}) ${tz.name}</option>`);
  }, "");

document.querySelector(".js-Selector").innerHTML = selectorOptions;

document.querySelector(".js-Selector").addEventListener("change", e => {
  const timestamp = dateTimeUtc.unix();
  const offset = moment.tz(e.target.value).utcOffset() * 60;
  const dateTimeLocal = moment.unix(timestamp + offset).utc();

  document.querySelector(".js-TimeLocal").innerHTML = dateTimeLocal.format("ddd, DD MMM YYYY HH:mm:ss");
});

document.querySelector(".js-Selector").value = "Europe/Madrid";

const event = new Event("change");
document.querySelector(".js-Selector").dispatchEvent(event);

I have no idea how to begin to migrate this into my Vue.js project.

How would one add a timezone selection menu to their Vuejs project?