vue.jsでliイベントと中身のイベントが同時に発生する

いつもお世話になっています。
javascriptを触りたてで、vue.jsの一部処理につまずいております。

下記コードは、
liの要素全体にクリックイベントを発生させたかったため、
olにv-forを記述し、回しています。
li自体にクリックイベントを発生させることはできたのですが、
その中にある、spanの[x]をクリックしたとき、
spanEventだけでなく、liEventも同時に併発してしまいます。

[x]をクリックしたときは、spanEventのみ、
liのそれ以外の部分をクリックしたときは、liEventが実行されるようにしたいのですが、
うまく実現できませんでした。

vue
1      <ul>
2        <ol v-for="(item, index) in myList">
3          <li @click="liEvent(index)">
4            <span>
5              {{ item.name }}
6            </span>
7            <span @click="spanEvent(index)">
8              [x]
9            </span>
10          </li>
11        </ol>
12      </ul>
13
14
15    liEvent: function(index) {
16      console.log("---liEvent")
17    },
18    spanEvent: function(index) {
19      console.log("---spanEvent")
20    },

どなたかご教授のほど、お願いいたします。

2018/10/13 11:17追記
maisumakun様ありがとうございます。
イベントオブジェクトを渡すということで解決することができました。
下記二点の解決法コードを記載します。

stopPropagation
1      <ul>
2        <ol v-for="(item, index) in myList">
3          <li @click="liEvent(index, $event)">
4            <span>
5              {{ item.name }}
6            </span>
7            <span id="hoge" @click="spanEvent(index)">
8              [x]
9            </span>
10          </li>
11        </ol>
12      </ul>
13
14
15    liEvent: function(index, e) {
16      if (e.target.id !== "hoge") {
17        console.log("---liEvent")
18      }
19    },
20    spanEvent: function(index) {
21      console.log("---spanEvent")
22    },

target
1      <ul>
2        <ol v-for="(item, index) in myList">
3          <li @click="liEvent(index)">
4            <span>
5              {{ item.name }}
6            </span>
7            <span @click="spanEvent(index, $event)">
8              [x]
9            </span>
10          </li>
11        </ol>
12      </ul>
13
14
15    liEvent: function(index) {
16      console.log("---liEvent")
17    },
18    spanEvent: function(index, e) {
19      console.log("---spanEvent")
20      e.stopPropagation();
21    },