nawame/resources/views/address.blade.php

@once
    @push('css')
        <script src="https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
    @endpush
@endonce

<search-address-modal ref="{{ $ref }}" @address-selected="{{ $addressSelected }}" inline-template>
    <div class="modal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">주소검색</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div ref="searchAddress" style="width: 100%; height: 500px;"></div>
                </div>
            </div>
        </div>
    </div>
</search-address-modal>

@once
@push('js')
    <script>
        Vue.component('search-address-modal', {
            data: function () {
                return {
                };
            },
            methods: {
                open: function () {
                    var self = this;
                    $(self.$el).modal('show');
                    new daum.Postcode({
                        oncomplete: function (data) {
                            $(self.$el).modal('hide');
                            self.$emit('address-selected', data);
                        },
                        width: '100%', height: '100%', maxSuggestItems: 5
                    }).embed(this.$refs.searchAddress);
                }
            }
        });
    </script>
@endpush
@endonce