Vue でスクロールバーのスタイルを変更する方法

<ul class="nav-tabs-scroll">
  <li v-for="(item,index) タブ内" :key="index" class="nav-item-scroll">{
<!-- -->{item.text}}</li>
</ul>
<v-textarea アウトライン v-model="text" style="width: 200px; margin: 16px;" class="text"></v-textarea>

データ: () => ({
      タブ: [
        { 値: 4001、テキスト: 'ローンログ'、コード: 'LOAN_LOG' },
        { 値: 4002、テキスト: 'ドキュメント ログ'、コード: 'DOCUMENT_LOG' },
        { 値: 4003、テキスト: 'メモログ'、コード: 'NOTE_LOG' },
        { 値: 4004、テキスト: '操作ログ'、コード: 'OPERATION_LOG' },
        { 値: 4005、テキスト: '支払いログ'、コード: 'PAYMENT_LOG' },
        { 値: 4006、テキスト: 'メンテナンス ログ'、コード: 'MAINTENANCE_LOG' },
        { 値: 4007、テキスト: 'トランザクション ログ'、コード: 'TRANSACTION_LOG' },
        { 値: 4008、テキスト: 'コレクション ログ'、コード: 'COLLECTION_LOG' }、
        { 値: 4001、テキスト: 'ローンログ'、コード: 'LOAN_LOG' },
        { 値: 4002、テキスト: 'ドキュメント ログ'、コード: 'DOCUMENT_LOG' },
        { 値: 4003、テキスト: 'メモログ'、コード: 'NOTE_LOG' },
        { 値: 4004、テキスト: '操作ログ'、コード: 'OPERATION_LOG' },
        { 値: 4005、テキスト: '支払いログ'、コード: 'PAYMENT_LOG' },
        { 値: 4006、テキスト: 'メンテナンス ログ'、コード: 'MAINTENANCE_LOG' },
        { 値: 4007、テキスト: 'トランザクション ログ'、コード: 'TRANSACTION_LOG' },
        { 値: 4008、テキスト: 'コレクション ログ'、コード: 'COLLECTION_LOG' }、
        { 値: 4001、テキスト: 'ローンログ'、コード: 'LOAN_LOG' },
        { 値: 4002、テキスト: 'ドキュメント ログ'、コード: 'DOCUMENT_LOG' },
        { 値: 4003、テキスト: 'メモログ'、コード: 'NOTE_LOG' },
        { 値: 4004、テキスト: '操作ログ'、コード: 'OPERATION_LOG' },
        { 値: 4005、テキスト: '支払いログ'、コード: 'PAYMENT_LOG' },
        { 値: 4006、テキスト: 'メンテナンス ログ'、コード: 'MAINTENANCE_LOG' },
        { 値: 4007、テキスト: 'トランザクション ログ'、コード: 'TRANSACTION_LOG' },
        { 値: 4008、テキスト: 'コレクション ログ'、コード: 'COLLECTION_LOG' }
      ]、
      文章： ''
    }）、

<style lang="scss" スコープ>
  .nav-tabs-scroll {
    高さ: 100px;
    リストスタイル: なし;
    マージン: 0px;
    パディング: 16px 0;
    オーバーフローx: 自動;
    表示: インラインブロック;
    空白: ラップなし;
    幅: 100%; 
    背景: #F9FAFD;
  }
  .nav-item-scroll {
    背景: #E5F0FF;
    色: #24252E;
    フォントサイズ: 12px;
    フォントの太さ: 400;
    行の高さ: 16px;
    パディング: 8px 8px 180px;
    テキスト配置: 中央;
    表示: インライン;
    マージン: 0 4px 0;
    境界線の半径: 16px;
  }
  .nav-tabs-scroll::-webkit-scrollbar {
    幅: 20px;
    高さ: 10px;
  }
  .nav-tabs-scroll::-webkit-scrollbar-thumb {
    境界線の半径: 5px;
    背景: 赤;
  }
  .nav-tabs-scroll::-webkit-scrollbar-button {
    幅: 10px;
    境界線の半径: 50%;
    背景：黒;
  }
  .nav-tabs-scroll::-webkit-scrollbar-track {
    ボックスシャドウ: インセット 0 0 2px #333;
    境界線の半径: 5px;
    背景: 青;
  }
  .nav-tabs-scroll::-webkit-scrollbar-corner {
    背景: スプリンググリーン;
  }
  /*
  .nav-tabs-scroll::-webkit-scrollbar-track-piece {
    ボックスシャドウ: インセット 0 0 2px #333;
    境界線の半径: 5px;
    背景：プラム;
  }
  */
</スタイル>
<スタイル>
  .text.v-textarea テキストエリア::-webkit-resizer {
    背景: ピンク;
  }
</スタイル>