[1708] Event Handling Issue with External JS

If suppose I handle some click events for nuxt pages(spa) in external js and include in head tag, click events happen only when page refresh

For example, index.js included in head tag

$(document).ready(function () {
 $('.sample').on('click', function () {
   alert('sample')
})
}

pages index.vue

<template>
 <div class='sample'>
    data
</div>
<template>

how to use external js events in nuxt pages without DOM issue?