Vue JS自动生成密码不起作用

Question

我想在使用vue组件创建帐户时为用户生成密码。但是，当我选中该框时，它不会禁用密码输入字段。

这是我的代码：

create.blade.php

@extends('layouts.manage')

@section('content')
    <div class="flex-container">
        <div class="columns m-t-10">
            <div class="column">
                <h1 class="title">Create New Users User</h1>
            </div>
        </div>
        <hr class="m-t-0">

  <div class="columns">
   <div class="column">
    <form action="{{ route('users.store') }}" method="POST">

        <div class="field">
            <label for="name" class="label">Name</label>
            <p class="control">
                <input type="text" class="input" name="name" id="name">
            </p>
        </div>

        <div class="field">
            <label for="email" class="label">Email</label>
            <p class="control">
                <input type="email" class="input" name="email" id="email">
            </p>
        </div>

        <div class="field">
            <label for="password" class="label">Password</label>
            <p class="control">
                <input type="password" class="input" name="password" id="password" v-if="!auto_password" placeholder="Manually input a password">
                <b-checkbox name="auto_generate" class="m-t-15" v-model="auto_password">Auto Generate Password</b-checkbox>
            </p>
        </div>

        <button class="button is-success">Create User</button>
    </form>
   </div>
  </div>

    </div>
@endsection

@section('scripts')
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                auto_password: true
            }
        });
    </script>
@endsection

寻求帮助。 提前谢谢。