Can't update attribute line-number of prismjs when using with vuejs?

Question

I am making a project using Vue.js and Nuxt.js. I am using prismjs for highlighting code-snippets on my page. I have installed prismjs as given here.

This is my plugins/prism.js file:

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);

This is my vue component:

<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>

My problem is that when value of i changes from the pagination, the line number which has to be highlighted doesn't change. What is wrong? The change in i gets reflected in other content.