与vuejs一起使用时是否无法更新Arizonajs的属性行号？

Question

我正在使用Vue.js和Nuxt.js进行项目。我正在使用prismjs在页面上突出显示代码段。我已经按照给定的here安装了prismjs。

这是我的plugins/prism.js文件：

import Vue from "vue";
import Prism from "vue-prism-component";

import "prismjs";

import "prismjs/components/prism-c";
import "prismjs/components/prism-cpp";
import "prismjs/components/prism-java";
import "prismjs/components/prism-python";

import "assets/syntax-theme.css";

import "prismjs/plugins/line-numbers/prism-line-numbers.min";
import "prismjs/plugins/line-numbers/prism-line-numbers.css";

import "prismjs/plugins/line-highlight/prism-line-highlight.min";
import "prismjs/plugins/line-highlight/prism-line-highlight.css";

Vue.component("prism", Prism);

这是我的Vue组件：

<template>
    <div>
        <!-- other content -->
        <prism language="c" class="line-numbers" :data-line="i">{{codeC}}</prism>
        <b-pagination :total-rows="n" per-page="1" v-model="i"></b-pagination>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                n: 5,
                i: 1,
                codeC:
                    'int linearSearch(int arr[], int n, int x) {\n' +
                    '   for (int i = 0; i < n; i++) {\n' +
                    '       if (arr[i] == x) {\n' +
                    '           return i;\n' +
                    '       }\n' +
                    '   }\n' +
                    '   return -1;\n' +
                    '}'
            }
        }
    }
</script>

我的问题是，当i的值因分页而改变时，必须突出显示的行号不会改变。怎么了？ i中的更改会反映在其他内容中。