[Vuejs]-Sharepoint Edit Button that allows user to edit data from list in a webpart

You could try to use modal dialog to open edit form, sample demo.

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>
    <script type="text/javascript">
        //jQuery.noConflict();
        $(function () {
            new Vue({
                el: '#Vue_App',
                methods: {
                    EditMode: function (e) {
                        e.preventDefault();
                        var options = {
                            // define a URL (and yes, you can pass params to that URL) or reference your HTML object, but NOT both!
                            url: '/Lists/SourceList/EditForm.aspx?ID=1&IsDlg=1',
                            tite: 'Modal Title',
                            allowMaximize: false,
                            showClose: true,
                            width: 430,
                            height: 230,
                            dialogReturnValueCallback: myCallbackFunction
                        };
                        SP.UI.ModalDialog.showModalDialog(options);
                        return false;
                    }
                }
            })
            // The callback function expects a parameter of type SP.UI.DialogResult
            function myCallbackFunction(result) {
                switch (result) {
                    case SP.UI.DialogResult.OK:
                        alert("You clicked OK");
                        // reload data as necessary here
                        break;
                    case SP.UI.DialogResult.cancel:
                        alert("You clicked cancel or close.");
                        break;
                }
            }
        })

    </script>
    <div id="Vue_App">
        <button v-on:click="EditMode">EditMode</button>
    </div>