Почему VueJS не видит метод компонента?

Question

[Konstantin Malyarov]

<ul v-if="identification === 1" id="passport-RF" :identification="1" :last_name="last_name" :first_name="first_name"
        :patronymic="patronymic">
        <table>
            <thead>
            <tr>
                <td>Паспорт выдан</td>
                <td>Дата выдачи</td>
                <td>Код подразделения</td>
                <td>Серия</td>
                <td>Номер</td>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td><textarea></textarea></td>
                <td><input type="date"></td>
                <td><input type="number">-<input type="number"></td>
                <td><input type="number"></td>
                <td><input type="number"></td>
            </tr>
            </tbody>
        </table>
        <table>
            <thead>
            <tr>
                <td>Фамилия</td>
                <td>Имя</td>
                <td>Отчество</td>
                <td>Пол</td>
                <td>Дата рождения</td>
                <td>Место рождения</td>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td><input v-model="last_name" type="text"></td>
                <td><input v-model="first_name" type="text"></td>
                <td><input v-model="patronymic" type="text"></td>
                <td>
                    <gender :gender="gender"></gender>
                </td>
                <td><input type="date"></td>
                <td><input type="text"></td>
            </tr>
            </tbody>
        </table>
        <table>
            <thead>
            <tr>
                <td>Регион</td>
                <td>Пункт</td>
                <td>Район</td>
                <td>Улица</td>
                <td></td>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><span @click="addPassportRF()" class="button">Добавить документ</span></td>
            </tr>
            </tbody>
        </table>
    </ul>

Vue.component('passport-rf', {
        delimiters: ['${', '}'],
        data() {
            return {
                type_identification: null,
                patient: null,
                passport_issued: null,
                date_of_issue: null,
                unit_code_1: null,
                unit_code_2: null,
                series: null,
                number: null,
                last_name: null,
                first_name: null,
                patronymic: null,
                gender: null,
                date_of_birth: null,
                place_of_birth: null,
                region: null,
                location: null,
                district: null,
                street: null,
            }
        },
        template: '#passport-rf',
        mounted: function () {
            this.$root.$on('gender', function (gender) {
                this.gender = gender
            });
            this.$root.$on('identification', function (identification) {
                this.identification = identification
            });
        },
        methods: {
            addPassportRF: function () {
                this.$http.post('http://' + window.location.host + '/api/identifications/',
                    {
                        message: null,
                        identification: this.identification,
                        patient: this.patient,
                        passport_issued: this.passport_issued,
                        date_of_issue: this.date_of_issue,
                        unit_code_1: this.unit_code_1,
                        unit_code_2: this.unit_code_2,
                        series: this.series,
                        number: this.number,
                        last_name: this.last_name,
                        first_name: this.first_name,
                        patronymic: this.patronymic,
                        gender: this.gender,
                        date_of_birth: this.date_of_birth,
                        place_of_birth: this.place_of_birth,
                        region: this.region,
                        location: this.location,
                        district: this.district,
                        street: this.street,
                    },
                    {headers: {'X-CSRFToken': getCookie()}}
                ).then(response => {
                    this.message = 'Учетная запись документа создана';
                }, response => {
                    this.message = 'Все поля должны быть заполнены';
                });
            }
        },
    })

[Vue warn]: Property or method "addPassportRF" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in <Root>)
warn @ vue.js:597
warnNonPresent @ vue.js:1901
has @ vue.js:1934
click @ VM2411:3
invoker @ vue.js:2029
fn._withTask.fn._withTask @ vue.js:1828
VM2411:3 Uncaught TypeError: addPassportRF is not a function
    at click (eval at createFunction (vue.js:10667), <anonymous>:3:2773)
    at invoker (vue.js:2029)
    at HTMLSpanElement.fn._withTask.fn._withTask (vue.js:1828)

Answer 1

[Klein Maximus]

Без скобок:
@click="addPassportRF"

В данном случае в обработчик события должна передаваться ссылка на функцию (метод). Вот если бы метод addPassportRF возвращал функцию, то можно было бы и со скобками.

P. S.: Декомпозируйте компонент - не надо их делать такими огромными.

P. S. 2: Если у Вас элемент <span @click="addPassportRF()" class="button"> ведет себя как кнопка, то придерживайтесь семантики и используйте <button>