Nuxt環境でのSwiper.jsのrenderBulletを別の文字に置き換えたい

前提・実現したいこと

コーポレートサイトをwordpressからnuxtに置き換えています。
jqueryで書いたswierの独自ペジネーションをvue-awesome-swiperで書き換えたいです。

発生しているエラー

vueファイルでのrenderBulletが発火しません。ブラウザで見るとp-top_service_slide_leftの要素は空になっています。

jqueryでは発火します

該当のソースコード

html
1<div class="p-top_service">
2        <p class="c-bigtitle p-top_service_title">Service</p>
3        <div class="p-top_service_slide">
4          <div class="p-top_service_slide_left"></div>
5          <div class="p-top_service_slide_right">
6            <client-only>
7              <swiper ref="carousel" class="swiper" :options="swiperOptions">
8                <swiper-slide>
9                  <nuxt-link to="/aaaaa" class="p-top_service_slide_right_wrap_item">
10                    <img
11                      class="p-top_service_slide_right_wrap_item_img"
12                      src="~assets/img/top/sample.jpg"
13                    />
14                    <p class="p-top_service_slide_right_wrap_item_txt">
15                      サンプルテキスト
16                    </p>
17                  </nuxt-link>
18                </swiper-slide>
19                <swiper-slide>
20                  <nuxt-link to="/weare" class="p-top_service_slide_right_wrap_item">
21                    <img
22                      class="p-top_service_slide_right_wrap_item_img"
23                      src="~assets/img/top/sample.jpg"
24                    />
25                    <p class="p-top_service_slide_right_wrap_item_txt">
26                      サンプルテキスト
27                    </p>
28                  </nuxt-link>
29                </swiper-slide>
30              </swiper>
31            </client-only>
32          </div>
33        </div>

jquery
1var swiper = new Swiper('.swiper-container', {
2        loop: true,
3        effect: 'fade',
4        allowTouchMove: false,
5        autoplay: {
6            delay: 5000,
7            disableOnInteraction: false,
8        },
9        paginationClickable: true,
10        pagination: {
11            el: '.p-top_service_slide_left',
12            type: 'bullets',
13            clickable: true,
14            renderBullet: function (index, className) {
15                if ($(window).width() > 1024) {
16                    return '<span class="p-top_service_slide_left_wrap' + ' ' + className + '"><div class="p-top_service_slide_left_wrap_name">' + ["サンプルテキスト", "サンプルテキスト", "サンプルテキスト"][index] + '</div><label class="p-top_service_slide_left_wrap_line"></label></span>';
17                } else {
18                    return '<span class="' + className + '">' + ["●", "●", "●"][index] + '</span>';
19                }
20
21            }
22        },
23    });

vue
1export default {
2  name: "index",
3  data() {
4    return {
5      swiperOptions: {
6        loop: true,
7        effect: "fade",
8        allowTouchMove: true,
9        autoplay: {
10          delay: 1000,
11          disableOnInteraction: true,
12        },
13        paginationClickable: true,
14        pagination: {
15          el: ".p-top_service_slide_left",
16          type: "bullets",
17          clickable: true,
18          renderBullet: function (index, className) {
19            if ($(window).width() > 1024) {
20              return (
21                '<span class="p-top_service_slide_left_wrap' +
22                " " +
23                ${className} +
24                '"><div class="p-top_service_slide_left_wrap_name">' +
25                ["サンプルテキスト", "サンプルテキスト", "サンプルテキスト"][${index}] +
26                '</div><label class="p-top_service_slide_left_wrap_line"></label></span>'
27              );
28            } else {
29              return (
30                <span class="${className} swiper-pagination-bullet-custom">["●", "●", "●"][${index}]</span>
31              );
32            }
33          },
34        },
35      },
36    };
37  },

scss
1 p-top_service {
2        margin: 0 auto 80px;
3        max-width: 1040px;
4
5        @include mq-max(ta) {
6            padding: 0 15px;
7            margin: 0 auto 60px;
8        }
9
10        &_title {
11            margin: 0 0 80px 0;
12
13            @include mq-max(ta) {
14                margin: 0 auto 30px;
15            }
16        }
17
18        &_slide {
19            display: flex;
20            justify-content: center;
21
22            @include mq-max(ta) {
23                flex-direction: column-reverse;
24            }
25
26            &_left {
27                width: auto !important;
28
29                &_wrap {
30                    display: flex !important;
31                    max-width: max-content;
32                    cursor: pointer;
33
34                    &:not(:last-child) {
35                        margin: 0 0 35px 0;
36                    }
37
38                    &_name {
39                        font-size: 32px;
40                        width: 330px;
41                        color: $black;
42
43                        @include mq-max(ta) {
44                            font-size: 30px;
45                        }
46                    }
47
48                    &_line {
49                        width: 15%;
50                        border-bottom: 3px solid $main;
51                        text-align: right;
52                        right: 0;
53                        margin: 0 0 0 auto;
54                        cursor: pointer;
55                    }
56                }
57            }
58
59            &_right {
60                position: relative;
61                width: 640px;
62
63                @include mq-max(ta) {
64                    width: 100% !important;
65                }
66
67                &_wrap {
68                    &_item {
69                        position: relative;
70
71                        &_img {
72                            z-index: -1;
73                            top: 0;
74                            left: 0;
75                            max-width: 640px;
76                            max-height: 460px;
77                            object-fit: cover;
78
79                            @include mq-max(ta) {
80                                max-width: none;
81                                max-height: none;
82                            }
83                        }
84
85                        &_txt {
86                            display: none;
87                            position: absolute;
88                            font-size: 24px;
89                            color: $black;
90                            font-weight: bold;
91                            top: 50%;
92                            left: 50%;
93                            transform: translateY(-50%) translateX(-50%);
94                            -webkit-transform: translateY(-50%) translateX(-50%);
95
96                            @include mq-max(ta) {
97                                display: block;
98                            }
99
100                            @include mq-max(sp) {
101                                font-size: 16px;
102                            }
103                        }
104                    }
105                }
106            }
107        }
108    }
109
110$black: #404040;
111
112$breakpoint-max: (
113  "sp": "(max-width: 599px)",
114  "ta": "(max-width: 1024px)",
115);
116$breakpoint-min: (
117  "sp": "(min-width: 600px)",
118  "ta": "(min-width: 1025px)",
119);
120
121@mixin mq-max($breakpoint) {
122  @media screen and #{map-get($breakpoint-max, $breakpoint)} {
123    @content;
124  }
125}
126
127@mixin mq-min($breakpoint) {
128  @media screen and #{map-get($breakpoint-min, $breakpoint)} {
129    @content;
130  }
131}

補足情報（FW/ツールのバージョンなど）

"jquery": "^3.6.0",
"npm": "^8.3.0",
"nuxt": "^2.15.8",
"nuxt-microcms-module": "^2.0.0",
"sass": "^1.45.1",
"sass-loader": "^10",
"swiper": "^7.4.1",
"vue": "^2.6.14",
"vue-awesome-swiper": "^4.1.1",
"vue-server-renderer": "^2.6.14",
"vue-template-compiler": "^2.6.14",
"webpack": "^4.46.0"