Edit in JSFiddle

  const vm = new Vue({
    el: "#app",
    data: {p: ""},
    computed: {
      s: function() {
        let s = 0
        s += /.{8,}/.test(this.p) ? 20 : 0
        s += /\d/.test(this.p)    ? 20 : 0
        s += /[a-z]/.test(this.p) ? 20 : 0
        s += /[A-Z]/.test(this.p) ? 20 : 0        
        s += /[#!&]/.test(this.p) ? 20 : 0
        return s
      },
    },
  })
<div id="app">
  <div class="form-horizontal">
    <div class="form-group">
      <label class="col-md-2 control-label">パスワード</label>
      <div class="col-md-10">
        <input class="form-control" v-model.trim="p" />
        <div class="help-block">
          <div class="progress progress-striped active">
            <div class="progress-bar progress-bar-info" :style="{width: `${s}%`}">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>