<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js Account Number Masking</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
<div class="col-12">
<label for="accountNumber">Account Number:</label>
<input id="accountNumber" type="tel" v-model="accountNumber" @input="maskAndDisplayLastDigits">
</div>
<div class="col-12">
<label for="confAccountNumber">Re-enter Account Number:</label>
<input id="confAccountNumber" type="tel" v-model="confAccountNumber" @input="maskAndDisplayLastDigits">
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
accountNumber: '',
confAccountNumber: ''
},
methods: {
maskAndDisplayLastDigits() {
