I want a read more/hide button when there's multiple lines

Question

I'm creating a comment section (something similar to youtube), and i want be able to show readmore/hide button when the {{content}} has multiple lines. This is what I've done so far, my read more/hide button works since I added a computed lineclamp, to make the content show two lines only when there's mutltiple lines, I only want to show the button in case there's multiples lines. But if you have any other suggestions to make it work, I'm open for it.

`

<template>
    <div>
        <div class="d-flex flex-row align-items-center">
            <h4 class="card-title">{{ author }}</h4>
            <h6 class="card-subtitle text-muted ml-3">
                {{ timeAgo(createdAt) }} ago
            </h6>
        </div>
        <p class="multiline" :style="{ '-webkit-line-clamp': computedLineclamp }"><b class="timestamp" v-if="timestamp !== null">@{{
        timeToHHMMSS(timestamp)
}}</b> {{ content }}
        </p>
        <div>
            <base-button v-show="!readmore" @click="changeLineclamp()" link class="text-white p-0" size="sm">Read
                more</base-button>
            <base-button v-show="readmore" @click="hideContent()" link class="text-white p-0"
                size="sm">Hide</base-button>
        </div>
    </div>
</template>
  
<script>
// Internal modules
import { timeSince, toHHMMSS } from "@/plugins/timeControls.js";

export default {
    name: "comment-item",
    data() {
        return {
            lineclamp: 2,
            readmore: false,
            showButton: true,
        }
    },
    props: {
        id: {
            type: String,
            required: true,
        },
        author: {
            type: String,
            required: true,
        },
        createdAt: {
            type: Number,
            required: true,
        },
        timestamp: {
            type: Number,
            required: true,
        },
        content: {
            type: String,
            required: true,
        }
    },
    methods: {
        changeLineclamp() {
            this.lineclamp = 'initial';
            this.readmore = true;
            this.showButton = false;
        },
        hideContent() {
            this.lineclamp = 2;
            this.readmore = false
        },
        timeAgo(date) {
            return timeSince(date);
        },
        timeToHHMMSS(time) {
            return toHHMMSS(time);
        },
    },
    computed: {
        computedLineclamp() {
            return this.lineclamp;
        },
    },
};
</script>
  
<style lang="scss" scoped>
@import "@/assets/sass/dashboard/custom/_variables.scss";

ul {
    list-style-type: none;
    padding: 0;
}

.button {
    visibility: none;
}

.timestamp {
    color: $primary;
}

.multiline {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;

    &.__lineclamp {
        -webkit-line-clamp: 2;
    }

    &.__none {
        -webkit-line-clamp: initial;
    }
}
</style>
  

`

enter image description hereenter image description here

As I said it does work here, but the readmore/hide button shows up in all the comment section, I tried to use the height function to make it work, but i doesn't

`

 <div v-if="content.height() > 2">
            <base-button v-show="!readmore" @click="changeLineclamp()" link class="text-white p-0" size="sm">Read
                more</base-button>
            <base-button v-show="readmore" @click="hideContent()" link class="text-white p-0"
                size="sm">Hide</base-button>
        </div>

`