sorrendezős feladat

<template>
  <div id="app">
    <div id="cim">Rakja sorrendbe a gyümölcsöket a szerint, hogy mennyire szereti (enni)!</div>
    <ol ref="si">
      <li :key="i" v-for="(e,i) in t">{{ e }}</li>
    </ol>
    <ol>
      <li v-for="(elem,i) in mt" :key="i">{{ elem.from }} ⇒ {{ elem.to }}</li>
    </ol>
  </div>
</template>

<script>
import Sortable from "sortablejs";
var mt;
export default {
  name: "cica",
  data() {
    return {
      mt: [],
      t: [
        "narancs",
        "banán",
        "alma",
        "grépfrút",
        "körte",
        "őszibarack",
        "sárgabarck",
        "sárgadinnye",
        "görögdinnye"
      ].sort((a, b) => a.localeCompare(b))
    };
  },
  mounted() {
    mt = this.mt;
    Sortable.create(this.$refs.si, {
      onUpdate(v) {
        mt.push({ from: v.oldIndex + 1, to: v.newIndex + 1 });
      }
    });
  }
};
</script>

<style>
body {
  background-color: rgb(210, 238, 236);
}
li {
  cursor: pointer;
}
#cim {
  font-size: 15px;
  text-shadow: 1px 1px 3px black;
  color: rgb(20, 80, 88);
}
</style>