CSSでモバイル用に横スクロールのボタン選択機能を実装する方法を教えてください【Vue.js】

前提・実現したいこと

スマホ用のページで、ボタン10個ほどを横に並べるようなUIを実現したく、横スクロールして希望のボタンをクリックできるように実装したいのですが、CSSがうまく効きません。

Vue.jsの2.6.12で実行しています。
ボタンやグリッドシステムにはVuetifyを使用しています。

発生している問題・エラーメッセージ

Vue.jsのコンポーネントにて、v-forで配列を展開しています。
後述する、v-forを使わない場合には、同じCSSでも期待通りの表示になります。

該当のソースコード

JavaScript
1<template>
2  <div>
3      <ul v-for="number in Numbers" :key="number" class="horizontal-list">
4        <li>
5          <v-btn>
6            {{ number }}
7          </v-btn>
8        </li>
9      </ul>
10  </div>
11</template>
12
13<script>
14export default {
15  data() {
16    return {
17      Numbers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
18    };
19  },
20};
21</script> 
22
23<style>
24.horizontal-list {
25  overflow-x: auto;
26  white-space: nowrap;
27  -webkit-overflow-scrolling: touch;
28  padding: 0;
29  display: flex;
30}
31.horizontal-list li {
32  flex: auto;
33  display: inline-block;
34}
35</style>

試したこと

以下のように、v-forで展開したい配列の値を、ひとつずつ手打ちした場合では、まったく同じCSSでも期待したように横一列で、横スクロールでの表示ができています。

JavaScript
1<template>
2  <div>
3    <ul class="horizontal-list">
4      <li>
5        <div>
6          <v-btn>
7            1
8          </v-btn>
9        </div>
10      </li>
11      <li>
12        <div>
13          <v-btn>
14            2
15          </v-btn>
16        </div>
17      </li>
18        <div>
19          <v-btn>
20            3
21          </v-btn>
22        </div>
23      </li>
24      … 
25      以下、同様にv-forを使わずにdataのNumbersにある配列の値を手打ちする
26    <ul>
27  </div>
28</template>
29
30<script>
31</script> 
32
33<style>
34.horizontal-list {
35  overflow-x: auto;
36  white-space: nowrap;
37  -webkit-overflow-scrolling: touch;
38  padding: 0;
39  display: flex;
40}
41.horizontal-list li {
42  flex: auto;
43  display: inline-block;
44}
45</style>