Why doesn't this work?!

HTML

<script src="https://unpkg.com/vue"></script>
<div id="app">
<h2>Vue Components</h2>
  <form>
    <test value="1aAbcdef"></test><br/>
    <test value="1aAAAAAA"></test><br/>
    <test value="a123AAAA"></test><br/>
    <test value="f345bC#4"></test><br/>
    <test value="f345bCdf"></test><br/>
  </form>
<h2>Normal Elements</h2>
  <form>
    <input type="text" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,16}" value="1aAbcdef"/><br/>
    <input type="text" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,16}" value="1aAAAAAA"/><br/>
    <input type="text" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,16}" value="f345bC#4"/><br/>
    <input type="text" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,16}" value="1aAbcdef"/><br/>
    <input type="text" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,16}" value="f345bCdf"/><br/>
  </form>
</div>

CSS

input {
  outline: none;
  margin: 10px;
}
input:invalid {
  border: 1px solid red;
  box-shadow: 0 0 5px red;
}
input:valid {
  border: 1px solid green;
  box-shadow: 0 0 5px green;
}

JavaScript

Vue.component('test', {
template:`<input type="text" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,16}"
title="Must contain at least one number and one uppercase and lowercase letter, and be between 8 and 16 characters."/>`
})

new Vue({
	el: '#app'
})