Is garbage collection necessary in vue components?

I was reading a tutorial on Cleave.js, and the author was doing garbage collection with the onBeforeUnmount method. Like this:

<template>
    <input ref="refInput" type="text" :value="modelValue">
</template>

<script setup>
import Cleave from 'cleave.js'
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'

let emit = defineEmits(['update:modelValue'])

let props = defineProps({
    modelValue: {
        type: [String, Number],
        default: '',
    },
})

let refInput = ref(null)
let cleave = ref(null)

onMounted(() => {
    if (cleave.value) return

    cleave.value = new Cleave(refInput.value, {
        numeral: true,
        onValueChanged: (e) => {
            emit('update:modelValue', e.target.rawValue)
        },
    })
})

onBeforeUnmount(() => {
    if (cleave.value) { 
        cleave.value.destroy()
        cleave = null
    }
})
</script>

Is this necessary? What benefit does it provide over keeping things simple like this:

<template>
    <input ref="refInput" type="text" :value="modelValue">
</template>

<script setup>
import Cleave from 'cleave.js'
import { ref, computed, onMounted } from 'vue'

let emit = defineEmits(['update:modelValue'])

let props = defineProps({
    modelValue: {
        type: [String, Number],
        default: '',
    },
})

let refInput = ref(null)

onMounted(() => {
    new Cleave(refInput.value, {
        numeral: true,
        onValueChanged: (e) => {
            emit('update:modelValue', e.target.rawValue)
        },
    })
})
</script>