Vue component in Backpack button - laravel

Question

I'm fairly new to both Laravel and Vue, I'm using backpack for my admin interface and i'm trying to add a button to the rows in one of my CRUD views. I've got teh button added and using a view with HTML and JS directly in teh view, but what I would like to do is use a Vue component for the button so I can re-use this elsewhere.
My view component works fine when I use it in a normal page, but when I add it to the button view it doesn't even register.
Password.Vue component file:
<template>
<div>
Test
<div class="modal fade" tabindex="-1" role="dialog" id="bannerformmodal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Reset Password</h4>
</div>
<div class="modal-body">
<form action="" method="">
<div class="form-group">
<input id="password" type="password">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
</template>
<script>
export default {
mounted() {
console.log('Component ready.')
}
}
</script>
resetPassword.blade.php in views/vendor/backpack/crud/buttons
<password></password>
button addition on crud controller:
$this->crud->addButtonFromView("line", "reset_Password","resetPassword" , "end");