Vue.jsで画像アップロード＆保存の際のPHPの処理（Laravel未使用）

勉強も兼ねて、jQueryで書いていた処理を参考に、同じような処理をVue.jsに置き換えています。
サーバーサイドの言語はPHPで、Laravelは使っていません。

フォームで画像をアップロードしてサーバー側で所定のフォルダに保存する　という処理を実装していますが、画像データを所定のフォルダに保存するところがうまく行きません。
アドバイスをいただけますと幸いです。

###【jQueryの場合】こちらは問題なく動いています。
■edit.html フォーム＆scriptを抜粋

<!DOCTYPE html>
<html>
    <body>
        <form method="post" action="" id="product_form">
            <input type="file" name="image">
            <div class="col-md-2 mt-4">
                 <button type="button" id="product_regist" class="btn btn-block btn-info">
                    更新
                </button>
            </div>
        </form>
    <script>
        
        //更新をクリックした時の処理
        jQuery(function($) {
            $("#product_regist").click(function() {
                //フォームのデータ一式
                var product_form = new FormData($('#product_form').get(0));
                
                $.ajax({
                    type: "POST",
                    url: "edit_done.php",
                    processData: false,
                    contentType: false,                    
                    data:product_form,
                                
                    success:function(data) {
                        //戻ってきた時の処理
                        if(data == 1) {
                            alert("更新が完了しました");
                            location.href= "list.php";
                        }
                        else {
                            $("#result").html(data);                            
                        }                                    
                    },
                    error:function(XMLHttpRequest, textStatus, errorThrown) {
                    }
                });
                
            });
        });        
    </script>
    </body>
</html>

■PHP側の処理　edit_dont.php

<?php
    $file_tmp  = $_FILES["image"]["tmp_name"];
    $file_name = $nowdate . "_" . $_FILES["image"]["name"];
    $file_save = "./img/" . $file_name;

    if($_FILES["image"]["size"] !== 0) {
    //画像がアップロードされた時、所定のフォルダに保存
    move_uploaded_file($file_tmp, $file_save);
}

一時的にアップロードされる場所を$_FILES["image"]["tmp_name"];から取得し、
move_uploaded_fileでその場所から所定のフォルダに移動させていました。

###【Vue.jsを用いた場合】こちらはうまくできません。
■edit.html フォーム＆scriptを抜粋

<!DOCTYPE html>
<html>
    <body>
        <form method="post" action="" id="product_form">
            <input type="file" name="imgname_entry" @change="selectedImage" ref="image">
            <div class="col-md-2 mt-4">
                 <button type="button" id="product_regist" class="btn btn-block btn-info">
                    更新
                </button>
            </div>
        </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                product_form: '',
                new_image: '',                               
            },        
            methods: {
                selectedImage: function(e) {
                    e.preventDefault();                    
                    this.new_image = this.$refs.image.files[0];                    
                },
                regist: function() {
                                                                
                    //errorが0の場合は登録
                    if(this.errors.length == 0) {
                        
                        //★試したこと①
                        this.form_data = new FormData(document.getElementById('product_form')).get(0);
                        console.log(this.product_form); //★このconsole.logではnullになる
                        
                        //★試したこと②                        
                        const url = './edit_done.php';
                        let params = new FormData();                        
                        params.append('new_image', this.new_image);
                        
                        axios.post(url, params, {
                            headers: {
                                'content-type': 'multipart/form-data'
                            },
                        }).then(response => {
                            console.log(response.data);
                            if(response.data == 1) {
                                alert("更新しました");                                
                            }
                            else {
                                alert("更新に失敗しました:" + response.data);
                            }
                            
                        });
                    }
                }
            }
        });
    </script>
    </body>
</html>

■PHP側の処理試したこと②に対してのコードです　edit_dont.php

<?php
    $new_image = filter_input(INPUT_POST, "new_image");
    print($new_image["tmp_name"]);

//→すると、以下のようなエラーが出ます。
//Notice: Trying to access array offset on value of type null

試したこと①は、jqueryの時のように、FormDataをまるっとフォームから持ってこれないかと思って書きましたが、nullでした…

試したこと②は、Vueのフォームの作法に倣って、appendし、axiosで投げました。
php側で今まで同様、一時的に保存される場所から所定の場所に移動をしようと思いましたが、できませんでした…

LaravelではgetClientOriginalName()とstoreAs()を使ってできますが、
Laravelを使用せずにVue.jsを使ったやり方がわかりません…

（Vueではaxios使わずに、バリデーションだけ行ってformの機能で送ろうかなと思いつつありますが、良い方法があればお願いします。）