ASP.NET MVC core POST Request not converting JSON data to Model

Question

I have a model that I serialize to the screen and use with Vue.js. After screen/model changes I am using axios to perform a POST request back into my ASP.NET Core (2.0) Controller. So far every combination of tries results in all null values when evaluating my custom model in my Controller. Any suggestions would be appreciated.

Model:

[Serializable]
public class ClientsWebsite
{
    [Key]
    public string ClientID { get; set; }
    public string CustomSiteScript { get; set; }
    public string WebsiteName { get; set; }
    public string FormName { get; set; }
    public string SliderImagePath { get; set; }
    public string MessageHeader { get; set; }
    public string CallToActionMessage { get; set; }
}

Vue and POST Call:

var sliderApp = new Vue({
    el: '#sliderApp',
    data: {
        ClientsWebsite: [],
        axajLoaded: false,
        picked: []
    },
    created: function () {
        getUserSettings()
    }
})

function saveCustomSettings() {
    axios.post('/Slider/Slider/SaveCustomSettings', {
        vm: sliderApp.ClientsWebsite
    })
        .then(function (response) {
            console.log(response);
        })
        .catch(function (error) {
            console.log(error);
        });
}

Controller:

    [HttpPost]
    public string SaveCustomSettings(ClientsWebsite vm)
    {
        if (ModelState.IsValid)
        {
            //stuff...
        }

        return "Success";
    }

I have also tried using JSON.stringify in my JavaScript POST call, no changes.

Results of the POST Header Request Payload:

{"ClientsWebsite":{"ClientID":"6056e4a8-32a8-4042-b750-50c609edf140","CustomSiteScript":"someScriptHere","WebsiteName":"Blah.com","FormName":"Contact1","SliderImagePath":"ContactUs3","MessageHeader":"Hello, please send us a message","CallToActionMessage":"We will respond ASAP!!!!!"}}

UPDATE: The solution came from a combination of both the answers below.

Answer 1

In addition to what Nikolaus said, try adding [FromBody] before ClientsWebsite vm.

[HttpPost]
public string SaveCustomSettings([FromBody]ClientsWebsite vm)
{
    if (ModelState.IsValid)
    {
        //stuff...
    }

    return "Success";
}

Answer 2

You have a object wrapped around your model:

{"ClientsWebsite":{"ClientID":"6056e4a8-32a8-4042-b750-50c609edf140","CustomSiteScript":"someScriptHere","WebsiteName":"Blah.com","FormName":"Contact1","SliderImagePath":"ContactUs3","MessageHeader":"Hello, please send us a message","CallToActionMessage":"We will respond ASAP!!!!!"}}

Remove it:

{"ClientID":"6056e4a8-32a8-4042-b750-50c609edf140","CustomSiteScript":"someScriptHere","WebsiteName":"Blah.com","FormName":"Contact1","SliderImagePath":"ContactUs3","MessageHeader":"Hello, please send us a message","CallToActionMessage":"We will respond ASAP!!!!!"}

For your function:

function saveCustomSettings() {
axios.post('/Slider/Slider/SaveCustomSettings', 
    sliderApp.ClientsWebsite
)
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });

}