【Vue.js】1つのinputを操作すると、別のinputに影響を与えてしまう

Vue.jsとjQueryを用いて開発しております。
1部抜粋して質問させていただきます。

##今回のやりたいこと
inputに入力された値に対して、3桁ごとにカンマをつけ、先頭に¥マークをつけるというものです。
jQueryで実装し、具体的には下記になります。

１.focus時にinput内の¥及び,を消す（replace）
２.blur時に3桁ごとに,をつけ、先頭に¥を付与する

jQuery
1
2// ￥＋3桁毎に点を入れる
3$(function() {
4    // フォーカスを離した時
5    $('input.number_input').on('blur', function() {
6        var num = $(this).val();
7        num = '¥' + num.replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
8        $(this).val(num);
9    });
10    // フォーカスした時
11    $('input.number_input').on('focus', function() {
12        var num = $(this).val();
13        num = num.replace(/,/g, '').replace(/¥/g, '');
14        $(this).val(num);
15    })
16});

上記をVue.jsの中で実装し、2つのinputに対してnumber_inputクラスで付与しました。
すると、1つ目のinputに数字を入力後、2つ目のinputに数字を入力すると、1つ目のinput内の¥及び,が消えてしまうという現象が起こりました。
Vue.jsの記述を除くと上記エラーが発生しなかったので、Vue.jsが原因なのは判明しているのですが、具体的な原因はわかりませんでした。
##全コード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="utf-8">
5    <title></title>
6</head>
7<body>
8	<div id="app">
9		<p>A<input class="number_input" type="text" v-model="a_input"></p>
10		<p>B<input class="number_input" type="text" v-model="b_input"></p>
11	</div>
12	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>　<!-- vue.js -->
13	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!-- jQUery -->
14	<script>
15		// ￥＋3桁毎に点を入れる
16		$(function() {
17		    // フォーカスを離した時
18		    $('input.number_input').on('blur', function() {
19		        var num = $(this).val();
20		        num = '¥' + num.replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
21		        $(this).val(num);
22		    });
23		    // フォーカスした時
24		    $('input.number_input').on('focus', function() {
25		        var num = $(this).val();
26		        num = num.replace(/,/g, '').replace(/¥/g, '');
27		        $(this).val(num);
28		    })
29		});
30	</script>
31    <script>
32    	new Vue({
33    		el: "#app",
34    		data: {
35    			a_input	: 0,
36    			b_input	: 0,
37    		}
38    	})
39    </script>
40</body>
41</html>
42
43

##試したこと

Ainput及びBinputに、それぞれjQueryのクラスを別に付与してみましたが、ダメでした。
具体的には下記コードになります。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="utf-8">
5    <title></title>
6</head>
7<body>
8	<div id="app">
9		<p>A<input class="input_a" type="text" v-model="a_input"></p>
10		<p>B<input class="input_b" type="text" v-model="b_input"></p>
11	</div>
12	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>　<!-- vue.js -->
13	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!-- jQUery -->
14	<script>
15		// ￥＋3桁毎に点を入れる
16		$(function() {
17		    // フォーカスを離した時
18		    $('input.input_a').on('blur', function() {
19		        var num = $(this).val();
20		        num = '¥' + num.replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
21		        $(this).val(num);
22		    });
23		    // フォーカスした時
24		    $('input.input_a').on('focus', function() {
25		        var num = $(this).val();
26		        num = num.replace(/,/g, '').replace(/¥/g, '');
27		        $(this).val(num);
28		    })
29		});
30	</script>
31	<script>
32		// ￥＋3桁毎に点を入れる
33		$(function() {
34		    // フォーカスを離した時
35		    $('input.input_b').on('blur', function() {
36		        var num = $(this).val();
37		        num = '¥' + num.replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
38		        $(this).val(num);
39		    });
40		    // フォーカスした時
41		    $('input.input_b').on('focus', function() {
42		        var num = $(this).val();
43		        num = num.replace(/,/g, '').replace(/¥/g, '');
44		        $(this).val(num);
45		    })
46		});
47	</script>
48    <script>
49    	new Vue({
50    		el: "#app",
51    		data: {
52    			a_input	: 0,
53    			b_input	: 0,
54    		}
55    	})
56    </script>
57</body>
58</html>
59